作爲一個Web的前端攻城師，在製作頁面效果時肯定有碰到下面這種現象：當一個HTML頁面中含有較少的內容時，Web頁面的“footer”部分隨着飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將Web頁面的“footer”部分永遠固定在頁面的底部呢？注意了這裏所說的是頁腳footer永遠固定在頁面的底部，而不是永遠固定在顯示器屏幕的底部，換句話說，就是當內容只有一點點時，Web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠在頁面的底部，換句說，Footer部分永遠沉底。如下圖所示：
那麼今天主要和大家一起學習如何將頁腳固定在頁面的底部？
方法一
首先我們來看第一種方法，這種方法是來自於Matthew James Taylor的《How to keep footers at the bottom of the page》。下面我們就一起來看看Matthew James Taylor介紹的方法。
HTML Markup
其實我們可以在div#page增加所需的內容結構，如下所示：
真正來說，實現這頁腳永遠固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了div#header（頭部），div#page（頁面主體部分，我們可以在這個div中增加更多的div結構，如上面的代碼所示），div#footer（頁腳部分）
CSS Code
下面我們一起來看看這種方法的實現原理：
- <html>和<body>標籤：html和body標籤中必須將高度(height)設置爲“100%”,這樣我們就可以在容器上設置百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都爲0；
- div#container容器：div#container容器必須設置一個最小高度(min-height)爲100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度，不過在IE6是不支持min-height的，所以爲了兼容IE6，我們需要對min-height做一定的兼容處理，具體可以看前面的代碼，或者閱讀Min-Height Fast Hack瞭解如何解決min-height在Ie6下的bug問題。另外我們還需要在div#container容器中設置一個"position:relative"以便於裏面的元素進行絕對定位後不會跑了div#container容器；
- div#page容器：div#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳div#footer的高度（height）值，當然你在div#page中可以使用border-bottom人水-width來替代padding-bottom，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果；
- div#footer容器：div#footer容器必須設置一個固定高度，單位可以是px(或em)。div#footer還需要進行絕對定位，並且設置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在屏幕的底部（因爲div#container設置了一個min-height:100%），當內容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設一個"width:100%"，讓他在整個頁面上得到延伸；
- 其他div：至於其他容器可以根據自己需求進行設置，比如說前面的div#header,div#left,div#content,div#right等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容，並且也適應iphone。
缺點：
不足之處就是需要給div#footer容器設置一個固定高度，這個高度可以根據你的需求進行設置，其單位可以是px也可以是em，而且還需要將div#page容器的padding-bottom（或border-bottom-width）設置大小等於（或略大於）div#footer的高度，才能正常運行。
上面就是Matthew James Taylor介紹的如何實現頁腳永遠固定在頁面的底部，如果大家感興趣可以閱讀原文，也可以直接點擊這裏查看Demo。
方法二：
這種方法是利用footer的margin-top負值來實現footer永遠固定在頁面的底部效果，下面我們具體看是如何實現的。
方法一和方法二有幾點是完全相同的，比如說方法一中的1-3三點，在方法二中都一樣，換句話說，方法二中也需要把html,body高度設置爲100%,並重置margin,padding爲0；其二div#container也需要設置min-height:100%,並處理好IE6下的min-height兼容問題；其三也需要在div#page容器上設置一個padding-bottom或border-bottom-width值等於div#footer高度值（或略大於）。那麼兩種方法不同之處是：
- div#footer放在div#container容器外面，也就是說兩者是同級關係，如果你有新元素需要放置在與div#container容器同級，那你需要將此元素進行絕對定位，不然將會破壞div#container容器的min-height值；
- div#footer進行margin-top的負值設置，並且此值等於div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容。
缺點：
要給footer設置固定值，因此無法讓footer部分自適應高度。
大家要是對這種方法感興趣，你也可以瀏覽一下《CSS Sticky Footer》和《Pure Css Sticky Footer》，或者直接點擊Demo查看其源代碼。