footer固定底部的方法

<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>footer始终居于底部</title><style type="text/css">* { 
margin:0; padding:0; }
body { 
        font:14px/1.8 arial; }/*核心代码，html,body,wrap高度100%*/html, body, 
.wrapage { 
        height:100%; }/*外框高度自动，最小高度100%，ie下高度100%*/
.wrapage {    
        height:auto; 
    min-height:100%; 
    _height:100%; 
    background:#CCC; 
    color:#fff; 
    font-size:18px; 
    text-align:center; 
}/*内容主体下padding 防止底部叠加*/
.mainw { padding-bottom:80px; }/*底部相对定位，高度为主体的下padding,负margin值。*/
.footer { 
    position:relative; 
    height:80px; 
    margin-top:-80px; 

    background:#eee; 
    color:#fff; 
    font-size:16px; 
    text-align:center; 
}</style></head><body><p class="wrapage">
    <p class="mainw">
        <h1>页面高度不满，底部固定</h1>
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <br />
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p>
        <p>页面高度不满，底部固定</p>
        <br />
        <p>页面高度不满，底部固定</p>
        <br />   
    </p></p><p class="footer">
    <h1>页面高度不满，底部固定</h1>
   </p>
  </body>
</html>

以上就是footer固定底部的方法的详细内容，更多请关注其它相关文章！

相关文章：

你感兴趣的文章：

标签云：