首先，我們搭出大體的結構：
<body> <div id="container"> <div id="header">Header Title</div> <div id="page" class="clearfix"> <div id="left">Left Sider</div> <div id="content">Main Content</div> <div id="right">Right Sider</div> </div> <div id="footer">Footer Section</div> </div> </body>
對於css:
1. reset: 去除html, body的margin, padding. 並且設置height為100%, 為的是方便以后子元素設置百分比。
2.我們還需要在div#container容器中設置一個"position:relative"以便於里面的元素進行絕對定位后不會跑了div#container容器。
3.div#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳div#footer的高度（height）值，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果；
4.div#footer容器：div#footer容器必須設置一個固定高度，單位可以是px(或em)。div#footer還需要進行絕對定位，並且設置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在屏幕的底部（因為div#container設置了一個min-height:100%），當內容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設一個"width:100%"，讓他在整個頁面上得到延伸；
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; } /*=======主體內容部分=======*/ #left { width: 220px; float: left; margin-right: 20px; background: lime; } #content { background: orange; float: left; width: 480px; margin-right: 20px; } #right{ background: green; float: right; width: 220px; }