DFdou's Blog Life is short,Be yourself.

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。

Some Related Posts

• 2009/06/18 -- Flash-Transparent时在FF和Safari下无法输入中文的解决方案 (0)
• 2009/11/25 -- 记得关注你的竞争对手 (0)
• 2009/08/06 -- IE6 No More (2)
• 2008/12/15 -- IE6的absolute Bug (0)
• 2008/06/23 -- 关于HTML注释在IE,FF下的问题 (0)
• 2009/04/20 -- CSS Tools-Reset CSS (0)
• 2009/04/09 -- CSS Naked Day! (2)
• 2009/04/01 -- Flash-CSS,StyleSheet (0)
• 2008/08/06 -- Drupal模板页node.tpl.php/样式定制 (0)
• 2008/08/05 -- Drupal 模块webform介绍及建议 (0)