Fork me on GitHub

Footer固定在页面底部(CSS) 

<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>


 


 




 







            

            
posted @ 
2016-04-27 21:34 
Roronoa__Zoro 
阅读(194) 
评论(0) 
编辑 
收藏 
举报