頁(yè)腳的位置問(wèn)題

網(wǎng)頁(yè)的頁(yè)腳（footer），也就是通常用來(lái)放置幫助鏈接及版權(quán)信息的地方。頁(yè)腳自然是應(yīng)該位于頁(yè)面底部的，但依照一般的做法，如果位于頁(yè)腳之前的網(wǎng)頁(yè)內(nèi)容比較少，或者說(shuō)使用了一個(gè)垂直分辨率較大的顯示器，就有可能出現(xiàn)頁(yè)腳看起來(lái)不在頁(yè)面底部的情況，如下圖。

由于頁(yè)腳基本上是一個(gè)網(wǎng)站的所有頁(yè)面公用的部分，不同頁(yè)面的內(nèi)容量有所差異，因此確實(shí)有可能某些頁(yè)面內(nèi)容不夠而出現(xiàn)這樣的問(wèn)題。另外，尤其是包含了底色的頁(yè)腳，發(fā)生這種問(wèn)題會(huì)很影響美觀。

所以，我們希望頁(yè)腳能夠無(wú)論網(wǎng)頁(yè)內(nèi)容量多少，都準(zhǔn)確地位于底部。
固定頁(yè)腳到底部的方法
絕對(duì)定位可行嗎？

也許有人想到過(guò)把頁(yè)腳設(shè)置為position:fixed，然后定位在底部。先不考慮不支持這個(gè)屬性值的IE6，從效果上說(shuō)，如果網(wǎng)頁(yè)本身內(nèi)容就很充足，這樣的寫法就會(huì)讓頁(yè)腳一開(kāi)始就出現(xiàn)在瀏覽器的底部，而在滾動(dòng)網(wǎng)頁(yè)時(shí)，頁(yè)腳會(huì)一直保持原位置。這樣的效果，顯然對(duì)大部分的網(wǎng)站都是不適宜的。

可以想見(jiàn)，我們需要的效果是：

    網(wǎng)頁(yè)內(nèi)容較多時(shí)，在滾動(dòng)到底部的時(shí)候才看到位于最下方的頁(yè)腳。
    網(wǎng)頁(yè)內(nèi)容較少時(shí)，頁(yè)腳仍然位于整個(gè)頁(yè)面的最下方，其余部分留白。

常規(guī)、簡(jiǎn)單的實(shí)現(xiàn)方法

CSS Sticky Footer提供了這個(gè)固定頁(yè)腳在底部的合理的實(shí)現(xiàn)方法。不過(guò)一方面這是一個(gè)英文站點(diǎn)，另一方面它所提供的寫法還存在些許可以改善的地方，所以本文會(huì)參考它的內(nèi)容，給出一個(gè)合理的實(shí)現(xiàn)方法。

首先需要這樣一個(gè)html結(jié)構(gòu)：

div.wrapper是網(wǎng)頁(yè)中除頁(yè)腳之外的所有內(nèi)容的外層容器，頁(yè)腳div.footer和它位于同一層級(jí)。div.footer_placeholder必須放在網(wǎng)頁(yè)所有內(nèi)容的最后，即作為div.wrapper的最后一個(gè)子元素，它的作用會(huì)在后文中說(shuō)明。

接下來(lái)寫css，依次做說(shuō)明。

當(dāng)網(wǎng)頁(yè)內(nèi)容不足的時(shí)候，body和html的實(shí)際高度可能小于瀏覽器的可視范圍，因此給body和html寫上高度100%。此外，接下來(lái)的直接子元素也會(huì)使用百分比的寫法，百分比的寫法必須在直接父元素有確定的高度定義時(shí)才有效。

所有網(wǎng)頁(yè)內(nèi)容都在這個(gè)div.wrapper中，定義最小高度（IE6使用hack），由于這個(gè)元素的父元素就是定義了100%高度的body，因此無(wú)論內(nèi)容多少，div.wrapper這個(gè)元素的高度都會(huì)占據(jù)整個(gè)瀏覽器可視范圍。然后，依照頁(yè)腳的高度，設(shè)置相等的下邊距負(fù)值，這樣頁(yè)腳就會(huì)恰好出現(xiàn)在頁(yè)面內(nèi)容的最后。

div.footer_placeholder，如字面意義，頁(yè)腳的占位元素，它只是一個(gè)空的div，定義高度和頁(yè)腳相同，它的存在是為了給頁(yè)腳留下位置。如果沒(méi)有它，可能會(huì)發(fā)生這樣的事情↓

到這里，固定在底部的頁(yè)腳就已經(jīng)實(shí)現(xiàn)了。css部分合起來(lái)是：

最新評(píng)論