我們經常會遇到這樣的問題：如何用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為固定高度值。新聞熱點
疑難解答
