页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

1、将内容部分的底部外边距设为负数

这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。

<body>

  <div class="wrapper">

      content

    <div class="push"></div>

  </div>

  <footer class="footer"></footer>

</body>
html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  min-height: 100%;

  /* 等于footer的高度 */

  margin-bottom: -50px;

}

.footer,

.push {

  height: 50px;

}

这个方法需要容器里有额外的占位元素（如.push）

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。

2、将页脚的顶部外边距设为负数

既然能在容器上使用负的margin bottom，那能否使用负margin top吗？当然可以。

给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。

<body>

  <div class="content">

    <div class="content-inside">

      content

    </div>

  </div>

  <footer class="footer"></footer>

</body>
html, body {

  height: 100%;

  margin: 0;

}

.content {

  min-height: 100%;

}

.content-inside {

  padding: 20px;

  padding-bottom: 50px;

}

.footer {

  height: 50px;

  margin-top: -50px;

}

不过这种方法和上一种一样，都需要额外添加不必要的html元素。

3、使用calc()设置内容高度

有一种方法不需要任何多余元素——使用CSS3新增的计算函数calc()

这样元素间就不会有重叠发生，也不需要控制内外边距了～

<body>

  <div class="content">

    content

  </div>

  <footer class="footer"></footer>

</body>

.content {

  min-height: calc(100vh - 70px);

}

.footer {

  height: 50px;

}

可能你会疑惑内容高度calc()中为什么减去70px，而不是footer的高度50px，因为假设俩元素有20px的间距，所以70px=50px+20px

不过，你不必在意这些~

4、使用flexbox弹性盒布局

以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮~（≧∇≦）

<body>

  <div class="content">

    content

  </div>

  <footer class="footer"></footer>

</body>
html {

  height: 100%;

}

body {

  min-height: 100%;

  display: flex;

  flex-direction: column;

}

.content {

  flex: 1;

}

你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一：

flex ： 1 使内容（如：.content）高度可以自由伸缩
 margin-top： auto

5、使用Grid网格布局

grid比flexbox还要新很多，并且更佳很简洁

<body>

  <div class="content">

    content

  </div>

  <footer class="footer"></footer>

</body>
html {

  height: 100%;

}

body {

  min-height: 100%;

  display: grid;

  grid-template-rows: 1fr auto;

}

.footer {

  grid-row-start: 2;

  grid-row-end: 3;

}

遗憾的是，网格布局（Grid layout）目前仅支持Chrome Canary和Firefox Developer Edition版本。

总结

其实页脚置底的布局随处可见，很多人也和我一样觉得比较简单，但可能只知其然罢了，偶然看到CSS-TRICKS上介绍页脚置底的文章觉得不错，遂译之。

CSS五种方式实现 Footer 置底的更多相关文章

  1. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

  2. jmeter关联的五种方式

    [脚本准备] 这里,我们用dummy取样器来模拟服务器的返回,通过关联获取name的值,然后接口取这个name的值,这就我们就简单模拟了请求间的依赖关系 在取样器中添加dummy取样器 搜索的关键字是 ...

  3. 五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

  4. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  5. javaScript中定义类或对象的五种方式

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...

  6. Spring事务配置的五种方式（转载）

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  7. Spring事务配置的五种方式

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  8. Android数据存储五种方式总结

    本文介绍Android平台进行数据存储的五大方式,分别如下: 1 使用SharedPreferences存储数据     2 文件存储数据       3 SQLite数据库存储数据 4 使用Cont ...

  9. Mysql查看版本号的五种方式介绍

    Mysql查看版本号的五种方式介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-03   一.使用命令行模式进入mysql会看到最开始的提示符;二.命令行中使用status可以看到 ...

随机推荐

  1. Java实现第八届蓝桥杯最大公共子串

    最大公共子串 最大公共子串长度问题就是: 求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc", 可以找到 ...

  2. Linux 用户管理命令-userdel和su

    userdel [选项] 用户名,可以删除用户,常用选项 -r :删除用户的同时删除用户的家目录,一般都要用,例如:userdel -r xbb 新建用户和删除用户的本质也就是修改了 /etc/sha ...

  3. dotnet tool install：Failed to install tool package 'ZKEACMS.Publisher': Could not find a part of the path 'C:\Users\Christer\.dotnet\tools\.store\.stage\0qd2mqpa.m45\ZKEACMS.Publisher'

    问题 按照 ZKEACMS 运行命令 dotnet tool install --global ZKEACMS.Publisher 提示 Failed to install tool package ...

  4. 数据结构与算法-python描述-单向循环链表

    # coding:utf-8 # 单向循环链表的相关操作: # is_empty() 判断链表是否为空 # length() 返回链表的长度 # travel() 遍历 # add(item) 在头部 ...

  5. CentOS6.5 开机启动自动运行redis服务

    [一].查找和设置自己的redis路径参数 环境变量 PATH=/usr/local/bin:/sbin/:/usr/bin:/bin 端口 REDISPORT=6379 文件位置 EXEC=/usr ...

  6. LR字符串处理函数-lr_save_datetime

    void lr_save_datetime(const char *format, int offset, const char *name); 中文解释: lr_save_datetime将当前日期 ...

  7. mybatis配置和使用

    1,配置 MyBatis实现映射器的2种方式:XML文件形式和注解形式,下文主要是用xml形式,比较好维护 mybatis-config.xml文件: <?xml version="1 ...

  8. 8种排序算法 Java实现

    冒泡排序 O(n2) 两个数比较大小,较大的数下沉,较小的数冒起来. public static void bubbleSort(int[] a) { //临时变量 int temp; //i是循环次 ...

  9. 添加现有项目到git仓库

    情景: 做了一个项目,需要放到git仓库里 为什么做这个记录? 我们一般的操作是先有仓库, 然后 git clone  到一个空文件夹.     然后再这个空文件夹里加项目文件.  再git push ...

  10. MFC vc++严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C3646 “m_SockClient”: 未知重写说明符

    严重性 代码 说明 项目 文件 行 禁止显示状态错误 C3646 “m_SockClient”: 未知重写说明符 MFC_TCP_CSocket_Client c:\users\tt2018\docu ...