固定於頁面底部不是指螢幕底部，而是當頁面內容較少不能佔滿螢幕時，頁尾不會上浮（此時位於螢幕底部）。當頁面內容較多，瀏覽器有滾動條出現，頁尾會處於頁面最底，需要將滾動條拉到底才能看到。這樣的效果通常是希望得到的結果。

思路：

1.將 html 、body 的高度設定為 100%，margin :0;

2.body 內建 div#page和 div#footer ，它們處於相同的層次，都使用相對定位，div#page 將包含頁面中其它所有的部分包括頁頭和主體。

3.div#page 的高度也設定為100%。此時，div#page 的高度將佔據整個頁面。而 div#footer 會挨在 div#page 的下面，造成一個滾動條出現。

4.利用 margin-top 將 div#footer 的位置向上移，如 margin-top:-60px（假設 div#page 的高度是 60px ）

這樣，無論 div#page 內的內容較少還是較多，div#footer 的位置都處於 div#page 的底部。但是還有一些細節要處理，比如 div#footer 會蓋住 div#page 底部的內容。為了不影響 div#page 的高度，需要在 div#page 內再套一層 div#container ，所有的頁面內容放在這個div#container 裡，給 div#container 設定一個 padding-bottom ，值等於 div#footer 的高度即可。具體程式碼如下：

html

<div id="page">
    <div id="container"></div>
</div>
<div id="footer">footer</div>

css

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#page {
    min-height: 100%;
    height: auto !important;
    height: 100%; /* 解決 ie 不支援 min-height */
}
#container {
    padding-bottom: 60px; /* 高度等於footer的高度 */
}
#footer {
    position: relative;
    margin-top: -60px; /* 高度等於footer的高度 */
    height: 60px;
}

這種方法 div#page 和 div#container 的 height 都應當是auto ，你可以在 div#container 內寫其它的部分，頁頭、浮動的左側…

完全由 css 實現，相容性強。但是必須給底部設定一個固定的高度值，不能實現自適應的高度。