這篇文章主要介紹CSS實現footer“吸底”效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
10年積累的成都網站設計、網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先建設網站后付款的網站建設流程，更有赤峰林西免費網站建設讓你可以放心的選擇與我們合作。
我們經常會遇到這樣的問題：如何用css來實現底部元素可“粘住底部”的效果，對于“粘住底部”，本文有兩種理解：
一是無論內容的多少，我們都希望使按鈕，固定于可視窗口的底部，且內容區(qū)是可滾動的。
二是當內容區(qū)的內容較少時，頁腳區(qū)不是隨著內容區(qū)排布，而是始終顯示在屏幕的最下方；當內容區(qū)的內容較多時，頁腳能隨著文檔流撐開，始終顯示在頁面的最底部。
談到“吸底”效果的實現，大家可能較多了解到的是sticky-footer布局，但這個方式大多是用來解決第二種情況的實現。本文將采用以下的三種方案來分別來實現以上這兩種效果，并簡單實現的原理以及其的適用情況。 容器（wrapper）包含兩部分，分別是內容（content）和底部需固定的區(qū)域（footer）。
html設置：
說明：以下方案的實現都基于這段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區(qū)域所覆蓋。
設置footer定位方式，這里要區(qū)別兩種效果：若是希望footer固定于頁面底部，此時設置wrapper的position:relative，相應地，為footer設置position:absolute，使footer相對于wrapper絕對定位，這樣一來，無論內容的多少，footer依然可以固定在頁面的最底部；而希望固定于可視窗口底部，為footer設置position:fixed，并設置相應定位即可。
設置height為固定高度值。
適用場景：
所使用的屬性在各瀏覽器中都實現得很成熟，相比第二、三種方案，最為推薦該方法。 不適用于以下的場景：定位(fixed)的區(qū)域中有文本框，因為在ios系統(tǒng)中，文本框調用輸入法時，定位的區(qū)域就會往上彈，離底部有段距離。
固定于頁面底部
演示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有著兼容性問題，在使用這種方式布局時需要注意。 在實現 固定于頁面底部 的效果時，采用這種彈性布局的思想，底部固定區(qū)域的高度可靈活設置，無需定義footer的高度，這也是這種方式的優(yōu)點。
固定于頁面底部
原理分析：
設置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區(qū)域的內容。
設置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實現
適用場景
該方案不需要任何額外樣式處理，代碼簡潔，但遺憾的是移動端的低版本系統(tǒng)不兼容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
以上是“CSS實現footer“吸底”效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！
重慶分公司
重慶分公司
