纯CSS 贴底部的布局

纯CSS 贴底部的布局
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>test</title>
5. <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
6. <style type="text/css">
7. html{height:100%;overflow:auto;}
8. body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
9. .main{border-bottom:60px solid #fff;}
10. #footer{position:absolute;100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
11. </style>
12. </head>
13. <body>
14. <div class="all">
15. <div id="topbar">菜单部分</div>
16. <div class="main">
17. 我是主体，我是核心<br /><br /><br /><br />
18. 虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚
19. </div>
20. <div id="footer">
21. 我是安分守己的页脚，我只安静的待在页面的最下方
22. </div>
23. </div>
24. </body>
25. </html>
FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。

IE8b2下的效果有瑕疵，用hack方法解决。
相关阅读:
G
O
M
K-Hero
J
G
F
Codeforces Round #327 (Div. 2) A Wizards' Duel (水题)
C++各大有名科学计算库(转)
矩阵算法高斯消元行列式矩阵的秩
原文地址：https://www.cnblogs.com/webblog/p/1557077.html