纯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;width: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方法解决。

posted @ 2009-08-31 10:18  WEB前端开发  阅读(4370)  评论(3)  编辑  收藏  举报