我們在設計一些頁面內容甚少的網頁時（典型應用就是登陸頁面），由於顯示器的分辨率大，在正常情況下，假如頁面內容高度小於瀏覽器高度時，頁面底部以下會留下很大的空間，如：http://www.helloweba.com/demo/cssfooter/demo1.html
不管瀏覽器的高度怎麼變化，我們要想讓頁底內容始終固定在底部，最終效果如：http://www.helloweba.com/demo/cssfooter/demo2.html
本文提供瞭一個CSS解決方案。
XHTML
<div id="wrap"><div id="main"> 主體</div></div><div id="footer"> 這裡是頁底footer內容</div>CSS
<style type="text/css">* {margin:0;padding:0;} html, body {height: 100%;}#wrap {min-height: 100%;}#main {overflow:auto;padding-bottom: 60px;} /* 必須使用和footer相同的高度 */#footer {position: relative;margin-top: -60px; height: 60px;clear:both;background:#369} /*Opera Fix*/body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;}</style>註意，以上代碼在IE6上根本不起作用，必須使用以下代碼來解決IE6下的BUG。
<!--[if !IE 7]><style type="text/css">#wrap {display:table;height:100%}</style><![endif]-->
