- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>test</title>
- <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
- <style type="text/css">
- html{height:100%;overflow:auto;}
- body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
- .main{border-bottom:60px solid #fff;}
- #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;}
- </style>
- </head>
- <body>
- <div class="all">
- <div id="topbar">菜单部分</div>
- <div class="main">
- 我是主体，我是核心<br /><br /><br /><br />
- 虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚
- </div>
- <div id="footer">
- 我是安分守己的页脚，我只安静的待在页面的最下方
- </div>
- </div>
- </body>
- </html>
FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。
IE8b2下的效果有瑕疵，用hack方法解决。