在網頁設計中，存在乙個相當古老但又相當常見的問題，它是前端工程
師繞不開的坎。這個問題可以簡單地概括如下：有乙個具有塊級樣式的頁尾
（比如它設定了背景或陰影），當頁面內容足夠長時它一切正常，而當頁面較
短時（比如錯誤資訊頁面）就會出現問題
① 此時的問題在於，頁尾不能像我
們期望中那樣「緊貼」在視口的最底部，而是緊跟在內容的下方。
這個問題不僅普遍存在，而且乍看起來確實相當簡單。因此，在所
有「隱蔽大坑」式的難題中，
② 它簡直就是教科書般的典型案例。不僅如此，
css 2.1 基本上拿它沒有辦法：幾乎所有的經典解決方案都需要給頁尾設定
固定的高度，而這顯然是不健壯的，也是不實際的。此外，所有這些解決方
案都太過複雜、太像 hack 了，而且往往要求網頁按照特定的結構來寫。在
那個年代，受制於 css 2.1 有限的能力範圍，這已是我們所能達到的最好結
果了。不過，在現代 css 的協助下，我們可以做得更好嗎？如果答案是肯
定的，又該如何去做？
我們手頭的這個頁面極其簡單， 元素內的結構**如下所示：
lang="en">
charset="utf-8">
documenttitle>
* html,
body
.footer,
.replace
.footer
style>
head>
href="">a>
p>
class="replace">
div>
div>
class="footer">
願你走過半生，歸來任是少年。
HTML頁面底部定位
先帝創業未半，而中道崩殂 今天下三分，益州疲敝，此誠危急存亡之秋也。然侍衛之臣，不懈於內 忠志之士，忘身於外者 蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣 不宜妄自菲薄，引喻失義，以塞忠諫之路也。宮中府中，俱為一體 陟罰臧否，不宜異同 若有作奸犯科，及為忠善者，宜付有司...
div頁面底部懸浮顯示
為了完成頁面底部顯示公司和技術贊助的顯示 使得在頁面滾動的時候 左右兩邊的梯形陰影始終顯示在底部 為了顯示在頁面底部 首先想到的是footer來設定頁面的頁尾 來顯示頁面底部的資訊 posted by w3school contact information someone example.com....
頁面頭部和底部固定
說明 設定body的padding屬性padding top 16px padding bottom 16px，使頁面上下留有16px的空白。然後設定 header和 footer的絕對位置和高度。設定 content的 overflow auto。試著改變這幾個引數，一用就明白 header fo...