我們經(jīng)常會(huì)遇到這樣的問(wèn)題：如何用css來(lái)實(shí)現(xiàn)底部元素可“粘住底部”的效果，對(duì)于“粘住底部”，本文有兩種理解：

• 一是無(wú)論內(nèi)容的多少，我們都希望使按鈕，固定于可視窗口的底部，且內(nèi)容區(qū)是可滾動(dòng)的。
• 二是當(dāng)內(nèi)容區(qū)的內(nèi)容較少時(shí)，頁(yè)腳區(qū)不是隨著內(nèi)容區(qū)排布，而是始終顯示在屏幕的最下方；當(dāng)內(nèi)容區(qū)的內(nèi)容較多時(shí)，頁(yè)腳能隨著文檔流撐開(kāi)，始終顯示在頁(yè)面的最底部。
   

談到“吸底”效果的實(shí)現(xiàn)，大家可能較多了解到的是sticky-footer布局，但這個(gè)方式大多是用來(lái)解決第二種情況的實(shí)現(xiàn)。本文將采用以下的三種方案來(lái)分別來(lái)實(shí)現(xiàn)以上這兩種效果，并簡(jiǎn)單實(shí)現(xiàn)的原理以及其的適用情況。 容器（wrapper）包含兩部分，分別是內(nèi)容（content）和底部需固定的區(qū)域（footer）。

html設(shè)置：

<!-- wrapper是包裹c(diǎn)ontent和footer的父容器 --></div>
<div class="wrapper">
   <div class="content">
     <ul>
       <!-- 頁(yè)面主體內(nèi)容區(qū)域 --></div>
       <li>1.這是內(nèi)容，這是內(nèi)容……</li>
       <li>2.這是內(nèi)容，這是內(nèi)容……</li>
       <li>3.這是內(nèi)容，這是內(nèi)容……</li>
       <li>4.這是內(nèi)容，這是內(nèi)容……</li>
       <li>5.這是內(nèi)容，這是內(nèi)容……</li>
       <li>6.這是內(nèi)容，這是內(nèi)容……</li>
       <li>7.這是內(nèi)容，這是內(nèi)容……</li>
       <li>8.這是內(nèi)容，這是內(nèi)容……</li>
       <li>9.這是內(nèi)容，這是內(nèi)容……</li>
      </ul>
   </div>
  <div class="footer">
    <!-- 需要做到吸底的區(qū)域 -->
    底部按鈕
  </div>
 </div>

說(shuō)明：以下方案的實(shí)現(xiàn)都基于這段html結(jié)構(gòu)

方案1：使用position對(duì)需固定元素定位

原理分析：

• 我們希望wrapper的外容器（包括html、body）的高度充滿(mǎn)整個(gè)屏幕，即設(shè)置高度height:100%，且設(shè)置wrapper的min-height:100%，這里設(shè)置的是min-height而不是height，是為了保證整個(gè)wrapper的最小高度可撐開(kāi)至全屏，即使內(nèi)容不足以充滿(mǎn)屏幕時(shí)，wrapper的高度仍是全屏的高度；當(dāng)wrapper的高度隨著content的高度變化而增大，它的高度是可以大于可視窗口的高度。
• 設(shè)置content（需要顯示內(nèi)容的容器，footer前一個(gè)兄弟元素）的padding-bottom值大于等于footer的height值，即可保證content中內(nèi)容不會(huì)被底部的footer區(qū)域所覆蓋。
• 設(shè)置footer定位方式，這里要區(qū)別兩種效果：若是希望footer固定于頁(yè)面底部，此時(shí)設(shè)置wrapper的position:relative，相應(yīng)地，為footer設(shè)置position:absolute，使footer相對(duì)于wrapper絕對(duì)定位，這樣一來(lái)，無(wú)論內(nèi)容的多少，footer依然可以固定在頁(yè)面的最底部；而希望固定于可視窗口底部，為footer設(shè)置position:fixed，并設(shè)置相應(yīng)定位即可。
• 設(shè)置height為固定高度值。

適用場(chǎng)景：

所使用的屬性在各瀏覽器中都實(shí)現(xiàn)得很成熟，相比第二、三種方案，最為推薦該方法。 不適用于以下的場(chǎng)景：定位(fixed)的區(qū)域中有文本框，因?yàn)樵趇os系統(tǒng)中，文本框調(diào)用輸入法時(shí)，定位的區(qū)域就會(huì)往上彈，離底部有段距離。

固定于頁(yè)面底部

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

css設(shè)置：

html,
body
  height 100%
.wrapper
  position relative // 關(guān)鍵
  box-sizing border-box
  min-height 100% // 關(guān)鍵
  padding-bottom 100px   // 該值設(shè)置大于等于按鈕的高度
  ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position absolute // 關(guān)鍵
  bottom 0
  left 0
  right 0
  height 100px // 設(shè)置固定高度
  background orange

固定于可視窗口底部

演示demo：https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

css設(shè)置：

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

方案2：使用flexbox布局實(shí)現(xiàn)

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

適用場(chǎng)景：

flex布局結(jié)構(gòu)簡(jiǎn)單，代碼精簡(jiǎn)。但flex有著兼容性問(wèn)題，在使用這種方式布局時(shí)需要注意。 在實(shí)現(xiàn) 固定于頁(yè)面底部 的效果時(shí)，采用這種彈性布局的思想，底部固定區(qū)域的高度可靈活設(shè)置，無(wú)需定義footer的高度，這也是這種方式的優(yōu)點(diǎn)。

固定于頁(yè)面底部

原理分析：

• 設(shè)置wrapper的min-height:100%，這里設(shè)置的是min-height而非height，是想使整個(gè)wrapper的最小高度撐開(kāi)至全屏，即內(nèi)容不足以充滿(mǎn)屏幕時(shí)，wrapper的高度仍是全屏；當(dāng)wrapper的高度隨著content的高度增大而變化，它的高度是可以大于可視窗口高度，而不一直都等于屏幕的高度。
• 設(shè)置wrapper的布局方式為flex，且content的flex:1，使content的高度始終為wrapper的減去底部footer的高度。

css設(shè)置：

html,
body
  height 100%
.wrapper
  min-height 100% // 關(guān)鍵
  display flex // 關(guān)鍵
  flex-direction column // 關(guān)鍵
.content
  flex 1  //關(guān)鍵
  ul
    list-style none
    li
      height 100px
      background lightblue
// 高度可不設(shè)置
.footer
    padding 20px
    background orange

固定于可視窗口底部

原理分析：

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

• 由于footer因設(shè)置了fixed而脫離了文檔流，因此需給wrapper設(shè)置padding，該值應(yīng)大于等于按鈕的高度，這樣才能保證footer不會(huì)覆蓋content區(qū)域的內(nèi)容。
• 設(shè)置footer定位方式為fixed，并設(shè)置相應(yīng)定位，即可使footer固定于可視窗口的底部。

css設(shè)置：

html,
body
  height 100%
.wrapper
  display flex // 關(guān)鍵
  min-height 100% // 關(guān)鍵
  padding-bottom 62px // 該值設(shè)置大于等于按鈕的高度
  flex-direction column // 關(guān)鍵
.content
  flex 1  //關(guān)鍵
  ul
    list-style: none
  li
    height 100px
    background lightblue
.footer
  position fixed  // 關(guān)鍵
  left 0
  right 0
  bottom 0
  padding 20px
  background orange

方案3：使用calc實(shí)現(xiàn)

適用場(chǎng)景

該方案不需要任何額外樣式處理，代碼簡(jiǎn)潔，但遺憾的是移動(dòng)端的低版本系統(tǒng)不兼容calc屬性。

固定于頁(yè)面底部 演示demo：https://codepen.io/hu0950/pen/ePBjdB

原理分析：

wrapper設(shè)置min-height:100%是希望content在內(nèi)容少時(shí)，高度能充滿(mǎn)整個(gè)屏幕，同時(shí)，當(dāng)content的內(nèi)容增加至高度大于屏幕時(shí)，wrapper的高度仍能是隨著content的高度變化而增加的，這樣一來(lái)，就能保證footer會(huì)依次排列在content的下邊。

css設(shè)置：

html,
body
  height 100%
.wrapper
  min-height 100% //關(guān)鍵：是min-height而不是height
.content
  min-height calc(100% - 100px) //關(guān)鍵：是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設(shè)置height:100%是希望無(wú)論content內(nèi)容的多少，它的高度都是屏幕的高度，如此一來(lái)，content的高度=父元素wrapper高度-底部需固定元素footer的高度，最后還需要為content加上overflow:scroll，使content中隱藏的部分也可通過(guò)滾動(dòng)顯示。
• content的父元素wrapper設(shè)置了height:100%，保證content的高度在計(jì)算時(shí)，100%固定等于屏幕的高度，而不會(huì)是隨著content內(nèi)容的高度變化的。

css設(shè)置：

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

寫(xiě)在最后

以上幾種實(shí)現(xiàn)方案，筆者都在項(xiàng)目中嘗試過(guò)，對(duì)每個(gè)方案也都給出了demo，方便大家調(diào)試與驗(yàn)證，每個(gè)實(shí)現(xiàn)的方法都存在限制性問(wèn)題，比如需要固定頁(yè)腳高度，或不適用于移動(dòng)端低版本的系統(tǒng)。大家可以根據(jù)具體的需求，選擇最適合的方案。 因?yàn)樽罱?xiàng)目需要，從網(wǎng)上查閱了許多資料也無(wú)法得到拿來(lái)就可以用的解決方案，也缺少對(duì)實(shí)現(xiàn)原理的分析，所以就經(jīng)過(guò)本人的總結(jié)與不斷測(cè)試，寫(xiě)了這篇文章。希望能對(duì)小伙伴有用。第一次掘金經(jīng)驗(yàn)，希望大家多多鼓勵(lì)喲~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論