码迷,mamicode.com
首页 > Web开发 > 详细

Footer固定在页面底部(CSS)

时间:2016-04-27 22:41:51      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:

<style type="text/css">
  #wapper{                    
        position: relative;    /*重要!保证footer是相对于wapper位置绝对*/  
        height: auto;           
        min-height: 100%;       
    }
  #main-content{ 
        background:grey;    
        padding-bottom: 60px;   /*重要!给footer预留的空间*/  
    } 
  #footer{ 
    background: green; 
    width: 100%; 
    position: absolute; 
    bottom: 0;              /* 关键 */ 
    height:60px;             /* 此方法的缺点:页脚的高度需要手动调 */
  } 
</style>


<body style="margin:0">
    <div id="wapper">  
        <!-- 主要内容 -->  
        <div id="main-content">
            这里是内容
        </div>  
        <!-- 页脚 -->  
        <div id="footer">  
            这里是页脚
        </div>  
    </div>  
 </body>

 

 

 

Footer固定在页面底部(CSS)

标签:

原文地址:http://www.cnblogs.com/roronoa-sqd/p/5440485.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!