在制作頁面有這樣一種現象：當一個HTML頁面中含有較少的內容時，Web頁面的“footer”部分隨着飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。
那么如何將Web頁面的 “footer”部分永遠固定在頁面的底部呢？注意了這里所說的是頁腳footer永遠固定在頁面的底部，而不是永遠固定在顯示器屏幕的底部，
換句話說，就是當內容只有一點點時，Web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠在頁面的底部，換句說，Footer部分永遠沉底。
方法：
1. HTML結構：
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix"> 頁面容容部分 </div>
<div id="footer">Footer Section</div>
</div>
實現這頁腳永遠固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了 div#header（頭部），div#page（頁面主體部分），div#footer（頁腳部分）
2. CSS代碼：
html,body { margin: 0; padding:0; height: 100%;
} #container { min-height:100%; height: auto !important; height: 100%; /*IE6不識別min-height*/ position: relative;
} #header { background: #ff0; padding: 10px;
} #page { width: 960px; margin: 0 auto; padding-bottom: 60px;/*等於footer的高度*/
} #footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*腳部的高度*/ background: #6cf; clear:both;
}
原理：
- <html>和<body>標簽：html和body標簽中必須將高度(height)設置為“100%”,這樣我們就可以在容器上設置百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0；
- div#container容器：div#container容器必須設 置一個最小高度(min-height)為100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度。另外我們還需要在div#container容器中設置一個"position:relative"以便於里面的元素進行絕對定位后不會跑了div#container容器；
- div#page容器：div#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳div#footer的高度（height）值；
- div#footer容器：div#footer容器必須設置一個固定高度。div#footer還需要進行絕對定位，並且設置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在屏幕的底部（因為div#container設置了一個min-height:100%），當內容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設一個"width:100%"，讓他在整個頁面上得到延伸；
- 其他div：至於其他容器可以根據自己需求進行設置，比如說前面的div#header,div#left,div#content,div#right等。