参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html
效果:将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾。
以下这种方案:布局虽然复杂,但兼容性最好
html部分
<div class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"></div> </div> <div class="detail-close"></div> </div>
css部分
<style> .clearfix { display: inline-block; } .clearfix:after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden; } .detail .detail-wrapper { height: auto; min-height: 100%; } .detail .detail-wrapper .detail-main { margin-top: 64px; /* 必须使用和footer相同的高度 */ padding-bottom: 64px; /* 必须使用和footer相同的高度 */ } .detail .detail-close { position: relative; margin: -64px auto 0 auto; /* footer高度的负值 */ width: 32px; height: 32px; clear: both; font-size: 32px; } </style>