怎么使用Sticky Footer代碼

介紹

Google一下可以找到很多讓頁(yè)腳緊貼頁(yè)面底部的方法，我試過(guò)其中的很多，但他們總會(huì)在某些方面存在一些問(wèn)題。之所以有這些問(wèn)題，可能是因?yàn)槌霈F(xiàn)了更新版本的瀏覽器。一些方法因?yàn)樘^(guò)久遠(yuǎn)，原本在老版本瀏覽器可以正常工作，卻不再適用更新之后的版本。也因?yàn)檫@些頁(yè)面太過(guò)久遠(yuǎn)，過(guò)去曾被大量鏈接過(guò)，所以在Google的結(jié)果中排名很高。這樣，一些網(wǎng)站管理員在搜索sticky footer方案的時(shí)候，對(duì)搜索出的結(jié)果都很撓頭，因?yàn)榕旁谒阉鹘Y(jié)果前列的方法都有這樣那樣的問(wèn)題。
眾所周知的是Ryan Fait的方案，它的確工作的很好。但是，它必須要單獨(dú)寫(xiě)一個(gè)沒(méi)有內(nèi)容的div，來(lái)提供額外的"push"。對(duì)HTML語(yǔ)義要求嚴(yán)格的人可以說(shuō)代碼這么寫(xiě)是不符合規(guī)范的，我們的方案不用附加的div。
將要介紹的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基礎(chǔ)上，并受到Cameron Adams和this piece at lwis.net工作的啟發(fā)。在Google Chrome和其他瀏覽器中，當(dāng)你縮放窗口的時(shí)候，頁(yè)腳會(huì)浮上來(lái)。該方案會(huì)應(yīng)用一種Clear fix hack方法，把頁(yè)腳固定在適當(dāng)?shù)奈恢蒙?，這種方法同時(shí)也解決了頁(yè)面布局是兩列或三列懸浮可能會(huì)帶來(lái)的問(wèn)題。在超過(guò)50種以上的瀏覽器測(cè)試中，它都能很好的工作。

HTML 代碼

下面是HTML代碼的基本結(jié)構(gòu)，footer標(biāo)簽在wrap標(biāo)簽的外面。




頁(yè)面內(nèi)容可以放在main標(biāo)簽的內(nèi)部。例如，下面是兩列懸浮頁(yè)面布局的HTML代碼；




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




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

CSS 代碼

下面的CSS代碼使頁(yè)腳緊貼在頁(yè)面的底部。



你會(huì)發(fā)現(xiàn)，頁(yè)腳的高度在這里被重復(fù)使用了三次，這是至關(guān)重要的，而且三個(gè)高度必須使用同樣的值。wrap的height屬性把自己拉伸至窗口全部高度的尺寸，負(fù)的margin會(huì)把footer提高到main的padding的位置上去，因?yàn)閙ain已經(jīng)在wrap的里面，所以main的padding已經(jīng)是wrap 100%高度的一部分。 這樣，footer就留在頁(yè)面的底部了。
現(xiàn)在還不算完成，我們還需要去clearfix main。

Clearfix Hack to the Rescue

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




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

需要了解的內(nèi)容

高度和邊距

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

字體的大小

設(shè)置字體大小的時(shí)候，如果你使用相對(duì)尺寸，要注意有些訪問(wèn)者可能會(huì)在顯示器配置中使用較大字體。如果footer下面沒(méi)有剩余足夠的空間來(lái)容納大字體，頁(yè)面高度的設(shè)置就會(huì)被破壞，從而導(dǎo)致footer下面有多余的空隙。所以，請(qǐng)使用
絕對(duì)大小(px)，不要使用pt或者em。

HTML和CSS源文件打包下載

最新評(píng)論