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

• 一是無論內容的多少，我們都希望使按鈕，固定于可視窗口的底部，且內容區是可滾動的。
• 二是當內容區的內容較少時，頁腳區不是隨著內容區排布，而是始終顯示在屏幕的最下方；當內容區的內容較多時，頁腳能隨著文檔流撐開，始終顯示在頁面的最底部。
   

談到“吸底”效果的實現，大家可能較多了解到的是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的高度變化而增大，它的高度是可以大于可視窗口的高度。
• 設置content（需要顯示內容的容器，footer前一個兄弟元素）的padding-bottom值大于等于footer的height值，即可保證content中內容不會被底部的footer區域所覆蓋。
• 設置footer定位方式，這里要區別兩種效果：若是希望footer固定于頁面底部，此時設置wrapper的position:relative，相應地，為footer設置position:absolute，使footer相對于wrapper絕對定位，這樣一來，無論內容的多少，footer依然可以固定在頁面的最底部；而希望固定于可視窗口底部，為footer設置position:fixed，并設置相應定位即可。
• 設置height為固定高度值。

適用場景：

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

固定于頁面底部

演示demo：https://codepen.io/hu0950/pen/yRVvQL

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：https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

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布局實現

演示demo：https://codepen.io/hu0950/pen/bmBMMr

適用場景：

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

固定于頁面底部

原理分析：

• 設置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

固定于可視窗口底部

原理分析：

除了以上(在方案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：https://codepen.io/hu0950/pen/ePBjdB

原理分析：

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：https://codepen.io/hu0950/pen/bmBjqb?editors=1100#0

原理分析：

• 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，方便大家調試與驗證，每個實現的方法都存在限制性問題，比如需要固定頁腳高度，或不適用于移動端低版本的系統。大家可以根據具體的需求，選擇最適合的方案。 因為最近項目需要，從網上查閱了許多資料也無法得到拿來就可以用的解決方案，也缺少對實現原理的分析，所以就經過本人的總結與不斷測試，寫了這篇文章。希望能對小伙伴有用。第一次掘金經驗，希望大家多多鼓勵喲~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。