CSS應用:讓頁腳緊貼頁面底部

怎么使用Sticky Footer代碼

介紹

Google一下可以找到很多讓頁腳緊貼頁面底部的方法，我試過其中的很多，但他們總會在某些方面存在一些問題。之所以有這些問題，可能是因為出現了更新版本的瀏覽器。一些方法因為太過久遠，原本在老版本瀏覽器可以正常工作，卻不再適用更新之后的版本。也因為這些頁面太過久遠，過去曾被大量鏈接過，所以在Google的結果中排名很高。這樣，一些網站管理員在搜索sticky footer方案的時候，對搜索出的結果都很撓頭，因為排在搜索結果前列的方法都有這樣那樣的問題。
眾所周知的是Ryan Fait的方案，它的確工作的很好。但是，它必須要單獨寫一個沒有內容的div，來提供額外的"push"。對HTML語義要求嚴格的人可以說代碼這么寫是不符合規范的，我們的方案不用附加的div。
將要介紹的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基礎上，并受到Cameron Adams和this piece at lwis.net工作的啟發。在Google Chrome和其他瀏覽器中，當你縮放窗口的時候，頁腳會浮上來。該方案會應用一種Clear fix hack方法，把頁腳固定在適當的位置上，這種方法同時也解決了頁面布局是兩列或三列懸浮可能會帶來的問題。在超過50種以上的瀏覽器測試中，它都能很好的工作。

HTML 代碼

下面是HTML代碼的基本結構，footer標簽在wrap標簽的外面。

<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>

頁面內容可以放在main標簽的內部。例如，下面是兩列懸浮頁面布局的HTML代碼；

<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>

Header放在wrap的里面，main的上面，如下所示；

<!--Example Source Code-->
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>

如果你需要在wrap或者footer的外面放一些元素，他們必須使用絕對位置；否則，頁面上計算好的100%的高度會被弄亂掉。

CSS 代碼

下面的CSS代碼使頁腳緊貼在頁面的底部。

/*Example Source Code*/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

你會發現，頁腳的高度在這里被重復使用了三次，這是至關重要的，而且三個高度必須使用同樣的值。wrap的height屬性把自己拉伸至窗口全部高度的尺寸，負的margin會把footer提高到main的padding的位置上去，因為main已經在wrap的里面，所以main的padding已經是wrap 100%高度的一部分。 這樣，footer就留在頁面的底部了。
現在還不算完成，我們還需要去clearfix main。

Clearfix Hack to the Rescue

多數SS designers對Clearfix Hack很熟悉，它解決了很多元素懸浮的問題，在這里，我們用它使得Google Chrome里面的頁腳緊貼頁面底部。它同時也解決了兩列懸浮布局所帶來的問題。這樣你就可以把內容放在一列，sidebar放在另一列，不會出現個別瀏覽器下面main里面的懸浮的內容導致頁腳浮上來的情況。
下面的代碼也加入到我們的 stylesheet 里面去；

/*Example Source Code*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

如果你比較喜歡Ryan Fait的方法，添加額外的push，在多列懸浮的頁面中，同樣需要用到clearfix。

需要了解的內容

高度和邊距

Header，wrap或者main標簽內部，如果對一些元素使用top或者bottom margin，可能會出現footer被向下移動的現象，移動距離一般是所用的margin的高度。這種情況下，可以使用padding替代margin來填充元素間隙。在頁面內容少的情況下，footer本來應該在頁面的底部，窗口的滾動條告訴你footer在頁面底部偏下的位置。找到那個搗亂的margin，并用padding替換掉。
為main聲明padding的時候要多加小心，如果你添加了這樣的代碼：padding:0 10px 0 10px，你就覆蓋了那個至關重要的本來應該和footer一樣的padding。Google Chrome中，在頁面內容很多的情況下，footer就會和你的頁面內容重疊在一起。

字體的大小

設置字體大小的時候，如果你使用相對尺寸，要注意有些訪問者可能會在顯示器配置中使用較大字體。如果footer下面沒有剩余足夠的空間來容納大字體，頁面高度的設置就會被破壞，從而導致footer下面有多余的空隙。所以，請使用
絕對大小(px)，不要使用pt或者em。