sticky footer絕對底部的2種實現方法

sticky footer絕對底部：當頁面內容小於屏幕高度時，底部模塊固定顯示在屏幕底部；當頁面內容大於屏幕高度時，底部模塊會被推到內容底部，拖動滾動條才能顯示。

一、min-height

頁面結構爲：

1 <div class="minHeight">
2     <div class="wrapper">
3         <div class="content">
4             <p>內容</p>
5         </div>
6     </div>
7     <div class="footer">底部模塊</div>
8 </div>

樣式：設置wrapper最小高度爲屏幕高度，footer設置負的上邊距固定在底部，當內容較長時，可能會向下與footer產生混疊，所以必須設置content的下padding，保證不重合。

<style type="text/css">
    .wrapper{
        min-height: 100%;
    }
   .content{
       padding-bottom: 50px;
   }
   .footer{
      position: relative;
      margin-top: -50px;
   }
</style>

二、flex佈局

1 <div class="box">
2     <div class="content">
3         <p>內容</p>
4     </div>
5     <div class="footer">底部模塊</div>
6 </div>

1 <style type="text/css">
2     .box{
3         display: flex;
4         flex-direction: column;  
5     }
6     .content{flex:1}
7 </style>