把footer固定在页面底部
2018-01-04 17:10:26 +08 字数：656 标签： CSS对HTML的footer，有一种常见需求是，要固定在页面底部。 这里说的『固定』，并非普通的放在页面内容的最下方，而是在页面内容高度不足时，仍然显示在页面底部。
本文最重要的参考是：https://codepen.io/vsync/pen/FyluI，它也是一个在线demo。
另一种常见需求是，悬浮在页面底部，本文不涉及。
思路 ¶
普通的布局方式，通常如下：
<!DOCTYPE html>
<html>
<head><!-- content ignored --></head>
<body>
<header><!-- content ignored --></header>
<div id="container"><!-- content ignored --></div>
<footer><!-- content ignored --></footer>
</body>
</html>
<header>一般需要固定在顶部，这没什么问题，普通布局自然满足。
<footer>在普通布局下，会在container底部。
如果container的高度大于等于一屏，则<footer>也自然满足固定在底部。
但如果container的高度不足一屏，则<footer>下面还有大片空白，不美。
要<footer>固定在底部，需要满足几个条件：
<body>使用相对定位。<footer>利用绝对定位，固定在底部。- 强行把
<body>的高度撑到100%。 - 为了避免
<footer>遮挡<body>最底部的内容，设置空白body::after撑起来。
CSS示例 ¶
html {
height:100%;
}
body {
min-height: 100%;
padding: 0;
margin: 0;
position: relative;
}
body::after {
height: 2em;
display: block;
content: '';
}
footer {
width: 100%;
height: 2em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
footer中的bottem是必须的，而left、right则是为了IE的兼容。footer中的height，需要大于等于body::after，否则还是会发生遮挡问题。
