經典的css sticky footer 佈局

【sticky footer】 指的就是一種網頁效果： 如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。

實現效果如下圖。

實現——
header.vue中首先創建3個div層。detail-wrapper,detail-main,detail-close

    <div v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">//清除浮動，當內容不足時，撐開高度min-height: 100%
        <div class="detail-main">//內容區
        </div>
      </div>
      <div class="detail-close">//底部關閉圖標
        <span class="icon-close"></span>
      </div>

clearfix爲通用清除浮層樣式代碼，一般應用在含有浮動結構的代碼中。例如這裏的sticky footer。
base.styl中的clearfix代碼爲：

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

header.vue中的style區域代碼爲：

  .detail
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(7, 17, 27, 0.8)
    z-index: 100
    overflow: auto//內容足夠時下滑。
    .detail-wrapper
      min-height: 100%//當內容不足時，撐開高度min-height: 100%
      .detail-main
        margin-top: 64px//這裏頂部有128px的距離，所以用margin-top,沒有可以不加。
        padding-bottom: 64px//給底部關閉圖標層預留空間，一定要有。
    .detail-close
      position: relative
      width: 32px
      height: 32px
      margin: -64px auto 0 auto//-負margin要與前面內容層裏預留的一致。左右兩邊auto保持居中。
      clear: both
      font-size: 32px