CSS 实现 sticky 在底部的页脚

最经典的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。如有疏漏、谬误、侵权请通过评论或 邮件 指出。
