頁面內容少時，footer跑到屏幕中間戳着是很難看的。用fixed吧，在內容多的時候又想它不要一直出現在屏幕下方，畢竟它不是那么重要。那么兩全其美的辦法是怎樣的呢？
html代碼
<div class="container">
<div class="header">這是頭部</div>
<div class="main">
這是正文
</div>
<div class="footer">這是尾部</div>
</div>
css代碼
html,body{margin:0;padding:0;height:100%}
.container{min-height:100%;height:auto !important;height:100%;/*ie6不識別min-height,如上述處理*/position:relative;}
.main{padding-bottom:60px;/*padding等於footer的高度*/}
.footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/}
說明：
html,body{height:100%}很關鍵，只有父級元素設置了高度，里面元素的相對高度才會生效。html、body 100%的高度是屏幕的高度。
container容器設置最小高度min-height 為100%，而不是height:100%，這很關鍵，可以使它在內容很少（或沒有內容）的情況下，能保持一屏的高度，（不過在IE6不支持min-height，所以為了兼容IE6，做以下處理：height:auto !important;height:100%;）；在內容很多的情況下，也能展現實際的高度。同時在container容器中設置“position:relative”，再對里面的footer元素進行絕對定位后，這樣footer就會根據container的高度來跑了，始終保持在container底部。
main這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳footer的高度（height）值。
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%”，讓它在整個頁面上得到延伸。
總結：
思路就是對footer采用絕對定位，因為絕對定位是根據實際高度來的，我們就要保證其父容器在不足一屏時高度為一屏，在超過一屏時，高度為實際高度，通過min-height可以實現，相對高度又需要html,body{height:100%}配合，這樣就OK了。