頁腳的位置問題

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

由于頁腳基本上是一個網站的所有頁面公用的部分，不同頁面的內容量有所差異，因此確實有可能某些頁面內容不夠而出現這樣的問題。另外，尤其是包含了底色的頁腳，發生這種問題會很影響美觀。

所以，我們希望頁腳能夠無論網頁內容量多少，都準確地位于底部。
固定頁腳到底部的方法
絕對定位可行嗎？

也許有人想到過把頁腳設置為position:fixed，然后定位在底部。先不考慮不支持這個屬性值的IE6，從效果上說，如果網頁本身內容就很充足，這樣的寫法就會讓頁腳一開始就出現在瀏覽器的底部，而在滾動網頁時，頁腳會一直保持原位置。這樣的效果，顯然對大部分的網站都是不適宜的。

可以想見，我們需要的效果是：

    網頁內容較多時，在滾動到底部的時候才看到位于最下方的頁腳。
    網頁內容較少時，頁腳仍然位于整個頁面的最下方，其余部分留白。

常規、簡單的實現方法

CSS Sticky Footer提供了這個固定頁腳在底部的合理的實現方法。不過一方面這是一個英文站點，另一方面它所提供的寫法還存在些許可以改善的地方，所以本文會參考它的內容，給出一個合理的實現方法。

首先需要這樣一個html結構：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表