页脚置底（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. 【Mysql】使用一条sql查询出库表结构信息

    1.新建查询 将以下脚本粘贴进去 脚本如下: SELECT TABLE_SCHEMA 库名, TABLE_NAME 表名, COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA ...

  2. Alink漫谈(六) : TF-IDF算法的实现

    Alink漫谈(六) : TF-IDF算法的实现 目录 Alink漫谈(六) : TF-IDF算法的实现 0x00 摘要 0x01 TF-IDF 1.1 原理 1.2 计算方法 0x02 Alink示 ...

  3. Java基础（十一）

    一.连接到服务器 telnet是一种用于网络编程的非常强大的测试工具,你可以在命令shell中输入telnet来启动它. 二.实现服务器 服务器循环体: 1.通过输入数据流从客户端接收一个命令. 2. ...

  4. xmake v2.3.4 发布, 更加完善的工具链支持

    为了让xmake更好得支持交叉编译,这个版本我重构了整个工具链,使得工具链的切换更加的方便快捷,并且现在用户可以很方便地在xmake.lua中扩展自己的工具链. 关于平台的支持上,我们新增了对*BSD ...

  5. 源码分析（2）-LinkedHashMap（JDK1.8）

    1.概述 LinkedHashMap继承自HashMap:在HashMap基础上,通过维护一条双向链表,解决了HashMap键值对遍历顺序和插入顺序一致的问题. 想了解LinkedHashMap源码, ...

  6. 我们为什么要用hibernate

    1.hibernate对JDBC访问数据库的代码做了一个封装,简化了数据访问繁琐的代码. 2.hibernate的性能非常好,因为它是个轻量级框架.映射的灵活性很好,它支持各种关系型数据库,从一对一到 ...

  7. Markdown 主题修改

    加粗字体的颜色修改 strong, b{ color: #111111; } 斜体的颜色修改 em, i { color: #111111; } 高亮字体的背景颜色修改 #write mark { b ...

  8. Spark Streaming + Kafka Integration Guide原文翻译及解析

    前面写了关于kafka和spark streaming的结合使用(https://www.cnblogs.com/qfxydtk/p/11662591.html),其具体使用用法其实来自于原文:htt ...

  9. 一个可扩展的弹幕播放器的HTML5实现范例---ABPlayerHTML5

    ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器.这个项目意在取代基于 Flash 的 ABPlayer,同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例.这个播放器將用相对通 ...

  10. 【loj - 3056】 「HNOI2019」多边形

    目录 description solution accepted code details description 小 R 与小 W 在玩游戏. 他们有一个边数为 \(n\) 的凸多边形,其顶点沿逆时 ...