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

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

談到“吸底”效果的實(shí)現(xiàn)，大家可能較多了解到的是sticky-footer布局，但這個(gè)方式大多是用來解決第二種情況的實(shí)現(xiàn)。本文將采用以下的三種方案來分別來實(shí)現(xià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>
<!-- 頁面主體內(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>

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

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

原理分析：

我們希望wrapper的外容器（包括html、body）的高度充滿整個(gè)屏幕，即設(shè)置高度height:100%，且設(shè)置wrapper的min-height:100%，這里設(shè)置的是min-height而不是height，是為了保證整個(gè)wrapper的最小高度可撐開至全屏，即使內(nèi)容不足以充滿屏幕時(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固定于頁面底部，此時(shí)設(shè)置wrapper的position:relative，相應(yīng)地，為footer設(shè)置position:absolute，使footer相對(duì)于wrapper絕對(duì)定位，這樣一來，無論內(nèi)容的多少，footer依然可以固定在頁面的最底部；而希望固定于可視窗口底部，為footer設(shè)置position:fixed，并設(shè)置相應(yīng)定位即可。