css经典布局—Sticky footers布局

参考：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>