免費AI編程助手
怎么使用 Sticky Footer 代碼
介紹
Google 一下可以找到很多讓頁腳緊貼頁面底部的方法，我試過其中的很多，但他們總會在某些方面存在一些問題。之所以有這些問題，可能是因為出現(xiàn)了更新版本的瀏覽器。一些方法因為太過久遠，原本在老版本瀏覽器可以正常工作，卻不再適用更新之后的版本。也因為這些頁面太過久遠，過去曾被大量鏈接過，所以在Google 的結(jié)果中排名很高。這樣，一些網(wǎng)站管理員在搜索 sticky footer 方案的時候，對搜索出的結(jié)果都很撓頭，因為排在搜索結(jié)果前列的方法都有這樣那樣的問題。 眾所周知的是 Ryan Fait 的方案，它的確工作的很好。但是，它必須要單獨寫一個沒有內(nèi)容的 div，來提供額外的"push"。對 HTML 語義要求嚴格的人可以說代碼這么寫是不符合規(guī)范的，我們的方案不用附加的div。 將要介紹的 Sticky Footer 方案是建立在 Exploring Footers article from A List Apart 成果的基礎(chǔ)上，并受到 Cameron Adams 和 this piece at lwis.net 工作的啟發(fā)。在 Google Chrome 和其他瀏覽器中，當你縮放窗口的時候，頁腳會浮上來。該方案會應(yīng)用一種 Clear fix hack 方法，把頁腳固定在適當?shù)奈恢蒙?，這種方法同時也解決了頁面布局是兩列或三列懸浮可能會帶來的問題。在超過 50 種以上的瀏覽器測試中，它都能很好的工作。
HTML 代碼
下面是 HTML 代碼的基本結(jié)構(gòu)，footer 標簽在 wrap 標簽的外面。
<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
??
頁面內(nèi)容可以放在 main 標簽的內(nèi)部。例如，下面是兩列懸浮頁面布局的 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;}
你會發(fā)現(xiàn)，頁腳的高度在這里被重復(fù)使用了三次，這是至關(guān)重要的，而且三個高度必須使用同樣的值。wrap 的 height 屬性把自己拉伸至窗口全部高度的尺寸，負的 margin 會把 footer 提高到 main 的 padding 的位置上去，因為 main 已經(jīng)在 wrap 的里面，所以 main 的 padding 已經(jīng)是 wrap 100% 高度的一部分。 這樣，footer 就留在頁面的底部了。 現(xiàn)在還不算完成，我們還需要去 clearfix main。
Clearfix Hack to the Rescue
多數(shù) SS designers 對 Clearfix Hack 很熟悉，它解決了很多元素懸浮的問題，在這里，我們用它使得 Google Chrome 里面的頁腳緊貼頁面底部。它同時也解決了兩列懸浮布局所帶來的問題。這樣你就可以把內(nèi)容放在一列，sidebar 放在另一列，不會出現(xiàn)個別瀏覽器下面 main 里面的懸浮的內(nèi)容導(dǎo)致頁腳浮上來的情況。 下面的代碼也加入到我們的 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。
需要了解的內(nèi)容
高度和邊距
Header，wrap 或者 main 標簽內(nèi)部，如果對一些元素使用 top 或者 bottom margin，可能會出現(xiàn) footer 被向下移動的現(xiàn)象，移動距離一般是所用的 margin 的高度。這種情況下，可以使用 padding 替代 margin 來填充元素間隙。在頁面內(nèi)容少的情況下，footer 本來應(yīng)該在頁面的底部，窗口的滾動條告訴你 footer 在頁面底部偏下的位置。找到那個搗亂的 margin，并用 padding 替換掉。 為 main 聲明padding 的時候要多加小心，如果你添加了這樣的代碼：padding:0 10px 0 10px，你就覆蓋了那個至關(guān)重要的本來應(yīng)該和 footer一樣的 padding。Google Chrome 中，在頁面內(nèi)容很多的情況下，footer就會和你的頁面內(nèi)容重疊在一起。
字體的大小
設(shè)置字體大小的時候，如果你使用相對尺寸，要注意有些訪問者可能會在顯示器配置中使用較大字體。如果 footer 下面沒有剩余足夠的空間來容納大字體，頁面高度的設(shè)置就會被破壞，從而導(dǎo)致 footer 下面有多余的空隙。所以，請使用 絕對大小(px)，不要使用pt或者 em。
