<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>
原文：http://www.cnblogs.com/roronoa-sqd/p/5440485.html