zoukankan      html  css  js  c++  java
  • 纯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方法解决。

  • 相关阅读:
    Android 通过广播来异步更新UI
    自拉ADSL网线搭建站点server,解决动态IP、无公网IP、80port被封、HTTP被屏蔽的方法
    UVA 10494 (13.08.02)
    直线向量方程
    直线向量方程
    初等解析几何
    初等解析几何
    算法/机器学习算法工程师笔试题
    算法/机器学习算法工程师笔试题
    Python 库的使用 —— dis
  • 原文地址:https://www.cnblogs.com/webblog/p/1557077.html
Copyright © 2011-2022 走看看