【Web Trick 4】CSS 实现footer固定页面底部

很多时候我们都需要去实现这个功能：将footer自适应固定在页面底部，

不管页面主内容的大小是多少，可以采用js去实现，但是js实现的话不

是很推荐，因为很多时候js的执行是滞后于页面加载的，所以你会看到

用js实现的动态css效果会导致你的页面刚出来的时候乱成一团，当然

你可以用定时器之类的技巧改善。下面我们尝试用css来实现。

首先是将主标签设为100%，如下：

html, body

{

height: 100%;

}

可以发现此时的html和body标签的高度是和一个屏幕的高度是一样的，

然后将主要内容放在wrap里，wrap的设置如下：

.wrap_content

{

min-height: 100%;

margin-bottom: 85px; //此处是margin，高度和footer高度一致

}

有人曾经说对于IE要在里面加一个height：100%，但是经测试不能那样。

最后是对于footer的设置

.footer {

height: 85px;

background: #2D2D2D;

margin: -85px auto 0;

}

从整个设置我们可以发现，用这种方法是可以实现各种效果的，我们将主内容

的最小高度设成100%，那么他会充满整个屏幕，为了能给footer留下空间，我

们需要留出一个和footer大小一致的留白，然后让footer的留白设成负值，大小

和main的留白大小一致，footer将会强行渲染到main留下的留白中来。

总结一下，利用DOM的盒子模型，配合最小高度（min-height）可以实现你想要

的效果