在觀看基於vue的仿餓了麼webapp開發的過程中遇到一個佈局問題，這是一個恆久的問題就是怎麼樣讓一個區塊始終在頁面底部，無論它前面的內容只有幾行或者多到頁面出現滾動條，該區塊始終出現在頁面底部，這就是著名的Sticky+footer佈局。
初始程式碼如下：

  <div v-show="detailShow" class="detail">
          <div class="detail-wrapper clearfix">
              <div class="detail-main">
                 <h1 class
 
="name">{{seller.name}}</h1>
              </div>
          </div>

          <div class="detail-close" @click="closeDetail">
             <i class="icon-close"></i>
          </div>

      </div>  

一個大的div作為一個包裹作用，裡面是兩個子div，第一個子div就是用來顯示內容的（裡面還有一個子div），第二個div就是一個關閉按鈕，顯示在頁面最底部的那一個區塊

對於第一個div的class 需要設定如下

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

它這個佈局實現的原理就是給它的偽類after新增一個內容，設定display必須為block或者inline-block，讓它偽類的內容佔一行，然後設定height跟line-height都為0，將它的visibility設定為hidden(這裡還是會佔據空間)，讓偽類一直佔據一行然後將下面的區塊，也就是我們要求一直在底部的區塊擠下去，這樣就實現了sticky footer佈局。

class為clearfix的類設定display:inline-block或者display:block都可以，這裡是行內塊顯示，所以用inline-block，將class=”detail-wrapper”的最小高度設定為100%，這樣無論它的內容多少都會佔領整個包裹它的div（class為detail的div）,那麼最下面的div則會緊緊的貼在最下面，然後給最下面的div設定樣式如下：

.detail-close
         position: relative
         width: 32px
         height: 32px
         margin: -64px auto 0 auto
         clear: both
         font-size: 32px

clear: both清除帶來的浮動，
margin: -64px auto 0 auto在這裡就是這個margin-top:-64px決定你的這個元素要往上面增加多少，具體情況具體分析。

希望這篇文章能夠幫到你。