Footer固定在页面底部(CSS)

最新推荐文章于 2021-06-03 14:33:02 发布

转载最新推荐文章于 2021-06-03 14:33:02 发布 · 129 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/roronoa-sqd/p/5440485.html

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用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>