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>


 
KEEP LEARNING!
原文地址:https://www.cnblogs.com/roronoa-sqd/p/5440485.html