div + css 使footer置底

Author : luckyGirl

现在网站比较流行 导航(Header)一直固定在顶部,footer一直固定在底部,前者使用position:fixed很容易实现,而将footer一直固定在底部可能会比较棘手,尤其是要兼容各种浏览器。最近发现了个比较好的方法,简单几行CSS就可实现这个功能。

HTML结构

<html>
    <head></head>
    <body>
        <div></div>
        <div id="footer"></div>
    </body>
</html>

CSS

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

几点注意:
1. 如果想要fixed的header,header要加在wrapper之内,且不能在wrapper上加padding-top/margin-top,以免产生多余的滚动条
2. wrapper{height:auto !important;height:100%;}主要是为了兼容低版本IE

今后再也不用担心 footer置底啦

参考:http://blog.sina.com.cn/s/blog_63ff72a60101flfv.html

standard

Have your say