页脚置底（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实现第八届蓝桥杯分巧克力

    分巧克力 题目描述 儿童节那天有K位小朋友到小明家做客.小明拿出了珍藏的巧克力招待小朋友们. 小明一共有N块巧克力,其中第i块是Hi x Wi的方格组成的长方形. 为了公平起见,小明需要从这 N 块巧 ...

  2. Flutter upgrade更新版本引发的无法启动调试APP的错误 target:kernel_snapshot failed”

    前言 我的主机上的Flutter 本地的分支是在 beta,因为去年想尝鲜Flutter Web,所以一直没切回来stable分支. 早上打开VSCode,右下角弹出了Flutter upgrade的 ...

  3. Python子类构造函数调用super().__init__()用法说明

    一.super的作用 1.如果子类(Puple)继承父类(Person)不做初始化,那么会自动继承父类(Person)属性name.2.如果子类(Puple_Init)继承父类(Person)做了初始 ...

  4. Vue可响应式数组方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. spring-framework 源码的下载与构建

    整体流程: 本地环境准备 找到源码地址并拉取到本地 根据IDE工具查看源码中提供的不同的安装说明并具体操作 构建会出现的的错误及解决 一.本地环境准备 spring-framework 源码使用gra ...

  6. layui 通过laytpl模板，以及laypage分页实现

    一.引用js依赖 jquery-1.11.3.min.js , layui.all.js, json2.js 二.js分页方法封装(分页使用模板laytpl) 1.模板渲染 /**  * 分页模板的渲 ...

  7. redis的持久化（RDB与AOF）

    1.为什么redis要实现持久化? 避免因宕机.断电等场景导致进程退出后数据丢失,如果redis的数据都只存放于内存,那么进程退出后数据就丢失了.持久化机制可以持久化内存数据到硬盘,重启redis后基 ...

  8. Alink漫谈(七) : 如何划分训练数据集和测试数据集

    Alink漫谈(七) : 如何划分训练数据集和测试数据集 目录 Alink漫谈(七) : 如何划分训练数据集和测试数据集 0x00 摘要 0x01 训练数据集和测试数据集 0x02 Alink示例代码 ...

  9. Springboot搭建Eureka并设置Eureka登录账号密码

    Springboot搭建Eureka并设置Eureka登录账号密码 一.创建一个springboot项目 1.可以使用Spring Initializr,用浏览器打开http://start.spri ...

  10. iOSdelegate、Notification、block区别

    1.delegate与block一般用于1对1的通信交互.delegate需先定义好协议方法,代理对象实现协议方法且需要建立代理关系才可以通信. 2.block使用简洁,如果通信事件较多,建议使用de ...