sticky-footer的三种解决方案

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样。这种效果基本是无处不在的,很受欢迎。

  

  那么面对这样的问题有什么解决方法呢?首先我们先构建简单的代码

<body>  <div class="content"></div>
  <div class="footer"></div></body>

  其中content为我们的内容区。下面开始介绍解决方法。

  一、为内容区域添加最小的高度

  这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度,从而求得内容区域的最小高度。例如我们可以添加如下样式:

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}    

  从而这个问题就解决了,但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次,这是很麻烦的,所以这种方法虽然简单但却是不推荐的。

  二、使用flex布局

  这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0,这样footer获得其固有的高度;content的flex设为1,这样它会充满除去footer的其他部分。

  代码如下:

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
 }
 .content {
    flex: 1;
}
.footer{
    flex: 0;
}

这样的布局简单使用,比较推荐。

  三、在content的外面可以添加一个wrapper

  这种方法就是在content的外面添加一个包裹容易,将html代码改成这样:

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div> 
  <div class="footer"></div>
</body>

  然后添加以下样式:

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

另外,为了保证兼容性,需要在wrapper上添加clearfix类。其代码如下:

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div> 
  <div class="footer"></div>
</body>
.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    

ok,好,完成了,这种方法也比较推荐,但就是加入的代码比较多,也改变了html的文档结构。

时间: 2024-10-15 11:45:16

sticky-footer的三种解决方案的相关文章

关于Ubuntu中E: Could not get lock /var/lib/dpkg/lock - open的三种解决方案

问题 在Ubuntu中,有时候运用sudo  apt-get install 安装软件时,会出现如下的情况: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable) E: Unable to lock the administration directory (/var/lib/dpkg/), is another process using it? 三种解决方案 这是由于apt

VS发布网站时,报错提示:“未能将文件xxx复制到xxx,未能找到文件xx”三种解决方案!

发布网站时候大家可能会遇到这样的情况,就是报错提示说:"未能将文件xxx复制到xxx,未能找到文件xx",这个问题一般来说有三种解决方案,个人倾向第三种,如图: 解决方案如下: 方案一.把系统提示缺失的文件重新放入相对应的文件夹中,然后再发布.但是如果时间久了文件自己都找不到的话这个方案不推荐: 方案二.删除".csproj"项目文件中的 < Content Include>相对应参数行,用"ctrl+f"找到后一个一个删除即可.如果

Android 跨进程启动Activity黑屏(白屏)的三种解决方案

原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面Lunacher启动一个App时也会出现相同情况,那是因为App冷启动也属于跨进程启动Activity.为什么没会出现这种情况呢?真正元凶就是Android创建进程需要准备很多资源,它是一个耗时的操作. 黑屏(白屏)原因 当A进程启动B进程中的一个Activity时,Android系统会先有zygo

记录一次MySQL两千万数据的大表优化解决过程,提供三种解决方案

问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务. 问题前提:老系统,当时设计系统的人大概是大学没毕业,表设计和sql语句写的不仅仅是垃圾,简直无法直视.原开发人员都已离职,到我来维护,这就是传说中的维护不了就跑路,然后我就是掉坑的那个!!! 我尝试解决该问题,so,有个这个日志. 方案概述 方案一:优化现有mysql数据库.优点:不影响现有业务

一次MySQL两千万数据大表的优化过程,三种解决方案

问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务. 问题前提:老系统,当时设计系统的人大概是大学没毕业,表设计和sql语句写的不仅仅是垃圾,简直无法直视.原开发人员都已离职,到我来维护,这就是传说中的维护不了就跑路,然后我就是掉坑的那个!!! 我尝试解决该问题,so,有个这个日志. 方案概述 方案一:优化现有mysql数据库.优点:不影响现有业务

Mybatis传多个参数(三种解决方案)

第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser" resultMap="BaseResultMap"> select * from user_user_t where user_name = #{0} and user_area=#{1} </select> 其中,#{0}代表接收的是da

MyBatis学习总结_19_Mybatis传多个参数(三种解决方案)

据我目前接触到的传多个参数的方案有三种. 第一种方案  DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser" resultMap="BaseResultMap"> select * from user_user_t where user_name = #{0} and user_area=#{1} </sele

Mybatis传多个参数(三种解决方案)

据我目前接触到的传多个参数的方案有三种. 第一种方案 DAO层的函数方法 ? 1 PublicUserselectUser(Stringname,String area); 对应的Mapper.xml ? 1 2 3 <selectid="selectUser"resultMap="BaseResultMap"> select * fromuser_user_t  whereuser_name = #{0}anduser_area=#{1} </s

【转】Mybatis传多个参数(三种解决方案)

转自: http://www.2cto.com/database/201409/338155.html 据我目前接触到的传多个参数的方案有三种. 第一种方案: DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser" resultMap="BaseResultMap"> select  *  from user_user

Mybatis传多个参数(三种解决方案) mapper.xml的sql语句修改!

第一种 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser" resultMap="BaseResultMap"> select * from user_user_t where user_name = #{0} and user_area=#{1} </select> 其中,#{0}代表接收的是dao层中的第一个参数,#{