vue2.0：（八-2）、外賣App彈窗部分sticky footer

什麼是sticky-footer ？

若是頁面內容不夠長的時候，頁腳塊粘貼在視窗底部，若是內容足夠長時，頁腳塊會被內容向下推送。那具體要怎麼作呢？下面之外賣App爲例：

第一種方法：這個本身用過，是好使的，剩下的第二種方法是在網上找的，可是我沒有用過。

　　一、基本佈局：

　　代碼：

<div v-show="detailShow" class="detail">
     <div class="detail-wrapper clearfix">　　<!-----------------------這裏面是上面內容的外殼，須要clearfix來清除浮動>
          <div class="detail-main"></div> <!-----------------------這裏面是真正的上部分的內容>
     </div>
     <div class="detail-close">　　　　　　　　<!-----------------------這裏面是關閉按鈕的外殼>　　
 <i class="icon-close">*</i>        <!-----------------------這裏面是關閉按鈕的內容，好比說關閉字樣，通常是一個叉號>
 </div> 
</div>

　　css代碼:

.clearfix{
    display:inline-block;
    &:after{
        display:'block';
        content:' . ';
        height:0;
        line-height:0;
        clear:both;
        visibility:hidden;
    }
}
.detail{
   position:fixed;
   top:0;
   left:0;
   z-index: 100;
   width:100%;
   height:100%;
   overflow:auto;
   backdrop-filter:blur(10px);
   opacity:1;
   background:rgba(7,17,27,0.8);
}
.detail-wrapper{
   width:100%;
   min-height:100%;
}
.detail-main{
   margin-top:64px;
   padding-bottom: 64px;        <!-------------------這個padding，其實就是footer關閉按鈕的高度。必須使用和footer相同的高度>
}
.detail-close{
   position:relative;
   width:32px;
   height:32px;
   margin:-64px auto 0 auto;   <!-------------------top:-64px;top須要是footer高度的負值 >
   clear:both;
   font-size:32px;
}

第二種方法：使用flex佈局

這種方法就是利用flex佈局對視窗高度進行分割。footer的flex設爲0，這樣footer得到其固有的高度;content的flex設爲1，這樣它會充滿除去footer的其餘部分。

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}