CSS-Two “Sticky Footer” Pure-CSS Solutions

2605/090

CSS-Two “Sticky Footer” Pure-CSS Solutions

如题，今天讲的是固底DIV的纯CSS解决方案，啊，或者说解决方法比较合适？
找了下资料，目前有2个比较可靠而且兼容性较好的解决方案，一个是CSS Sticky Footer，因为有中文版，大家自己看吧。
第2个是Ryanfait的《Make the Footer Stick to the Bottom of a Page》。
两者相差不大，最多就是CSS Sticky Footer少了一个DIV，且兼容的浏览器更多。
来，看一下《Make the Footer Stick to the Bottom of a Page》的HTML代码：

<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>

这里的DIV->push就是多出来的那个DIV～引用CSS Sticky Footer的话说就是：

Some HTML purists may find this a blasphemous use of non-semantic code. Our solution avoids the extra

对照的中文翻译是：

对HTML语义要求严格的人可以说代码这么写是不符合规范的，我们的方案不用附加的DIV~

然后是CSS：

* {
margin: 0;
}
html, body {
 height: 100%;
}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em;
}
.footer, .push {
 height: 4em;
}

这里同CSS Sticky Footer的做法是一样的，需要给.footer写一个height，并且在.wapper里写margin-bottom，height。
本人没有安装太多的浏览器测试，不过CSS Sticky Footer是号称兼容N多个浏览器，而Ryanfait的则是标了FF，IE，Opera，Safari。