CSS 总在底部的页脚

页脚 CSS HTML

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

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

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

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

实现机制分析

首先我们不希望页脚悬浮,可以排除基于fixedabsolute的绝对定位。

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

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

当页面够高时页脚仍位于文档流末尾,因此页脚前的页面内容高度应大于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; 
}
Harttle

致力于简单的、一致的、高效的前端开发

看看这个?