需求

我们经常会在页面底部加一个 footer(例如版权声明),当页面内容足够高时,这个 footer 放在内容最下面没什么问题。但是如果内容太少,高度小于可视范围,这时候 footer 的位置就会有些尴尬。我们希望 footer 能在此时,能像 fixed 定位一样,固定在可视页面底部。

解决

首先,假设我们的页面有如下布局:

<div class="main"></div>
<div class="footer"></div>

通过 CSS 让页面主体部分 main 块最小高度为 100%,此时每个页面不管 main 的高度如何,footer 都是需要滚动后才能看到的:

.main {
  min-height: 100%;
}

然后给 main 块底部预留好 footer 块的高度的位置,让 footer 块填充进去就好了:

.main {
  min-height: 100%;
  padding-bottom: 3em; /* 这里的 3em 是 footer 块的高度 */
}
.footer {
  margin-top: -3em;
}

现在已经实现当 main 块高度低于可视化高度时,footer 块固定在页面底部了。

我们可以再测试一下 main 块高度很大时,footer 块的情况:

.main {
  min-height: 100%;
  padding-bottom: 3em; /* 这里的 3em 是 footer 块的高度 */
  height: 100em; /* 这里只需要一个超过可视高度的值 */
}
.footer {
  margin-top: -3em;
}

此时 footer 块仍然正常的位于 main 下面,完全满足需求。