CSS實現footer「吸底」效果

咱們常常會遇到這樣的問題：如何用css來實現底部元素可「粘住底部」的效果，對於「粘住底部」，本文有兩種理解：

1. 一是不管內容的多少，咱們都但願使按鈕，固定於可視窗口的底部，且內容區是可滾動的。
2. 二是當內容區的內容較少時，頁腳區不是隨着內容區排布，而是始終顯示在屏幕的最下方；當內容區的內容較多時，頁腳能隨着內容區的增高而撐開，始終顯示在頁面的最底部。

談到「吸底」效果的實現，你們可能較多瞭解到的是sticky-footer佈局，但這個方式大可能是用來解決第二種狀況的實現。本文將採用如下的三種方案來分別來實現以上這兩種效果，並簡單實現的原理以及其的適用狀況。 容器（wrapper）包含兩部分，分別是內容（content）和底部需固定的區域（footer）。

html設置

<!-- wrapper是包裹content和footer的父容器 --></div>
<div class="wrapper">
   <div class="content">
     <ul>
       <!-- 頁面主體內容區域 --></div>
       <li>1.這是內容，這是內容……</li>
       <li>2.這是內容，這是內容……</li>
       <li>3.這是內容，這是內容……</li>
       <li>4.這是內容，這是內容……</li>
       <li>5.這是內容，這是內容……</li>
       <li>6.這是內容，這是內容……</li>
       <li>7.這是內容，這是內容……</li>
       <li>8.這是內容，這是內容……</li>
       <li>9.這是內容，這是內容……</li>
      </ul>
   </div>
  <div class="footer">
    <!-- 須要作到吸底的區域 -->
    底部按鈕
  </div>
 </div>
複製代碼

說明：如下方案的實現都基於這段html結構

方案1：使用position對需固定元素定位

原理分析

• 咱們但願wrapper的外容器（包括html、body）的高度充滿整個屏幕，即設置高度height:100%，且設置wrapper的min-height:100%，這裏設置的是min-height而不是height，是爲了保證整個wrapper的最小高度可撐開至全屏，即便內容不足以充滿屏幕時，wrapper的高度還是全屏的高度；當wrapper的高度隨着content的高度變化而增大，它的高度是能夠大於可視窗口的高度。
• 設置wrapper的padding-bottom值大於等於footer的height值，便可保證content中內容不會被底部的footer區域所覆蓋。
• 設置footer定位方式，這裏要區別兩種效果：如果但願footer固定於頁面底部，此時設置wrapper的position:relative，相應地，爲footer設置position:absolute，使footer相對於wrapper絕對定位，這樣一來，不管內容的多少，footer依然能夠固定在頁面的最底部；而但願固定於可視窗口底部，爲footer設置position:fixed，並設置相應定位便可。
• 設置height爲固定高度值。

適用場景

所使用的屬性在各瀏覽器中都實現得很成熟，相比第2、三種方案，較爲推薦該方法。 不適用於如下的場景：定位(fixed)的區域中有文本框，由於在ios系統中，文本框調用輸入法時，定位的區域就會往上彈，離底部有段距離。

固定於頁面底部

演示demo：codepen.io/hu0950/pen/…

css設置

html,
body
  height 100%
.wrapper
  position relative // 關鍵
  box-sizing border-box
  min-height 100% // 關鍵
  padding-bottom 100px   // 該值設置大於等於按鈕的高度
  ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position absolute // 關鍵
  bottom 0
  left 0
  right 0
  height 100px // 設置固定高度
  background orange
複製代碼

固定於可視窗口底部

演示demo：codepen.io/hu0950/pen/…

css設置

html,
body
  height 100%
.wrapper
  box-sizing border-box
  min-height 100% // 關鍵
  padding-bottom 100px   // 該值設置大於等於按鈕的高度
  ul
    list-style: none
    li
      height 100px
      background lightblue
.footer
  position fixed // 使按鈕固定於可視窗口的底部
  bottom 0
  left 0
  right 0
  height 100px  // 設置固定高度
  background orange
複製代碼

方案2：使用flexbox佈局實現

適用場景

flex佈局結構簡單，代碼精簡。但flex有着兼容性問題，在使用這種方式佈局時須要注意。 在實現固定於頁面底部的效果時，採用這種彈性佈局的思想，底部固定區域的高度可靈活設置，無需定義footer的高度，這也是這種方式的優勢。

固定於頁面底部

演示demo：codepen.io/hu0950/pen/…

原理分析

• 設置wrapper的min-height:100%，這裏設置的是min-height而非height，是想使整個wrapper的最小高度撐開至全屏，即內容不足以充滿屏幕時，wrapper的高度還是全屏；當wrapper的高度隨着content的高度增大而變化，它的高度是能夠大於可視窗口高度，而不一直都等於屏幕的高度。
• 設置wrapper的佈局方式爲flex，且content的flex:1，使content的高度始終爲wrapper的減去底部footer的高度。

css設置

html,
body
  height 100%
.wrapper
  min-height 100% // 關鍵
  display flex // 關鍵
  flex-direction column // 關鍵
.content
  flex 1  //關鍵
  ul
    list-style none
    li
      height 100px
      background lightblue
// 高度可不設置
.footer
    padding 20px
    background orange
複製代碼

固定於可視窗口底部

演示demo：codepen.io/hu0950/pen/…

原理分析

除了以上(在方案2-固定於頁面底部中的分析)，還有如下須要注意的地方：

• 因爲footer因設置了fixed而脫離了文檔流，所以需給wrapper設置padding，該值應大於等於按鈕的高度，這樣才能保證footer不會覆蓋content區域的內容。
• 設置footer定位方式爲fixed，並設置相應定位，便可使footer固定於可視窗口的底部。

css設置

html,
body
  height 100%
.wrapper
  display flex // 關鍵
  min-height 100% // 關鍵
  padding-bottom 62px // 該值設置大於等於按鈕的高度
  flex-direction column // 關鍵
.content
  flex 1  //關鍵
  ul
    list-style: none
  li
    height 100px
    background lightblue
.footer
  position fixed  // 關鍵
  left 0
  right 0
  bottom 0
  padding 20px
  background orange
複製代碼

方案3：使用calc實現

適用場景

該方案不須要任何額外樣式處理，代碼簡潔，但遺憾的是移動端的低版本系統不兼容calc屬性。

固定於頁面底部

演示demo：codepen.io/hu0950/pen/…

原理分析：

• wrapper設置min-height:100%是但願content在內容少時，高度能充滿整個屏幕，同時，當content的內容增長至高度大於屏幕時，wrapper的高度仍能是隨着content的高度變化而增長的，這樣一來，就能保證footer會依次排列在content的下邊。

css設置：

html,
body
  height 100%
.wrapper
  min-height 100% //關鍵：是min-height而不是height
.content
  min-height calc(100% - 100px) //關鍵：是min-height而不是height
  ul
    list-style none
  li
    height 100px
    background lightblue
// 高度固定
.footer
  height 100px
  background orange
複製代碼

固定於可視窗口底部

演示demo：codepen.io/hu0950/pen/…

原理分析：

• wrapper設置height:100%是但願不管content內容的多少，它的高度都是屏幕的高度，如此一來，content的高度=父元素wrapper高度-底部需固定元素footer的高度，最後還須要爲content加上overflow:scroll，使content中隱藏的部分也可經過滾動顯示。
• content的父元素wrapper設置了height:100%，保證content的高度在計算時，100%固定等於屏幕的高度，而不會是隨着content內容的高度變化的。

css設置：

html,
body,
.wrapper
  height 100%
.content
  height calc(100% - 100px) // 關鍵：使用height，而不是min-height
  overflow scroll // 關鍵
  ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position fixed
  left 0
  right 0
  bottom 0
  height 100px
  background orange
複製代碼

寫在最後

以上幾種實現方案，筆者都在項目中嘗試過，對每一個方案也都給出了demo，方便你們調試與驗證，每一個實現的方法都存在限制性問題，好比須要固定頁腳高度，或不適用於移動端低版本的系統等等。你們能夠根據具體的需求，選擇最適合的方案。

因爲最近項目須要，從網上查閱了許多資料，很可貴到拿來就能夠用的解決方案，或是缺乏對實現原理的分析，因此本人針對以上問題，作了相關總結，寫下了這篇文章。但願能對小夥伴有用。文章有不對的地方或是寫很差的地方，辛苦你們指正，也歡迎你們一塊兒探討解決「吸底」問題時，遇到的一些兼容性問題，或是提出一些更好的解決方案喲~

參考文章

css-tricks.com/couple-take…