最经典的Web页面布局少不了底部的页脚，页脚通常用来显示版权、备案号等信息。 绝对定位到底部的页脚会影响可视区域大小，因而最常见的布局方式是将页脚静态定位（默认行为）。 为了避免页面太小使页脚显示在屏幕中间，可采用增大内容边距和设置大背景图的做法。 然而在大屏幕越来越普及的今天这些方法越来越力不从心。

理想中的页脚应有这样的行为：

  • 当页面不够高时，页脚仍然出现在屏幕底部。
  • 当页面很高时，页脚仍然在整个文档流的末尾（不fix在屏幕下方）。

本文给出一个兼容主流浏览器的纯CSS的实现方案。

实现机制分析

首先我们不希望页脚悬浮，可以排除基于fixed和absolute的绝对定位。

在页面不够高时为了使页脚固定底部，页脚前的元素应当撑满整个高度， 这个值应当为100%屏幕高度 - 页脚高度，而在CSS中我们只能设置其width为100%，然后再想其他办法。

百分比的width属性是相对于直接父元素的，因此需要为页脚的每一级父元素都设置100%的高度， 这需要设置<html>, <body>元素的width为100%。

当页面够高时页脚仍位于文档流末尾，因此页脚前的页面内容高度应大于100%。 因此页脚前的元素应有min-width: 100%。

此时，我们可以使得页面内容总是撑满屏幕，而页脚总是在页面内容下方位置。 为了使它能够上移到屏幕底部，只需要为页面内容设置负的下边距。

然而负边距也会带来影响：页面内容的下面一部分会被页脚遮挡。 为此在页面内容后面再加一个空白的块来填充即可，这个使用伪元素就很好。

HTML结构

<html>
<body>
  <div class="page-wrap">This is an article about CSS.</div>
  <div class="footer">Copyright@ Harttle Land 2016</div>
</body>
</html>

CSS代码

/* 防止UA Default影响高度计算 */
*{
  margin: 0;
}
/* .footer的每一级父元素都为100%高 */
html, body {
  height: 100%;
}
.page-wrap {
  /* 页面内容撑满100%的屏幕 */
  min-height: 100%;
  /* 负边距大小即为页脚高度 */
  margin-bottom: -60px; 
}
/* 用来填充被页脚遮挡部分 */
.page-wrap:after {
  content: "";
  display: block;
}
/* 填充块和页脚一样高 */
.site-footer, .page-wrap:after {
  height: 60px; 
}

本文采用 知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可，转载注明来源即可： https://harttle.land/2016/09/09/sticky-footer.html。如有疏漏、谬误、侵权请通过评论或 邮件 指出。