基本想法
首先考慮外層設定一個容器div ，id 設為#container ，使他的高度為瀏覽器視窗的高度，然後將#footer 這個div 設定為#container 的子div，並使用絕對定位的方式，使他固定到#container 的底端，以實現希望的效果。
點這裡察看案例頁面效果。 改變瀏覽器的高度和寬度，可以看到Footer 部分的效果。
程式碼實作
下面先考慮HTML結構，這個示範頁面的HTML程式碼非常簡單。
<div id="container">
<div id="content">
<h1>Content</h1>
<p>請改變瀏覽器視窗的高度，以觀察footer效果。 </p>
<p>這裡是範例文字，………，這裡是範例文字。 </p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
然後設定CSS，
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
1：首先要給html 和body 元素設定高度（height屬性）為100% （第5行），這樣先保證根元素的高度撐滿整個瀏覽器窗口，然後下面才能使#container 的高度撐滿整個瀏覽器視窗。至於為什麼用同時設定html 和body 元素，是因為Firefox 和IE 認為的根元素不一樣，所以這裡都給他們設定上。
2：然後把#container 的高度也設定為100% （第8行），但是要注意，這裡使用了「min-height」屬性，而不是普通的height 屬性，這是因為我們要考慮到，如果# content 中的內容如果增加了，他的高度超過了瀏覽器視窗的高度，那麼如果把#container 的高度仍然是100%，就會導致#footer 仍然定位在瀏海視窗的下端，從而遮蓋了#content中的內容。而使用min-height 屬性的作用就是使#container 的高度「至少」為瀏覽器視窗的高度，而當如果它裡面的內容增加了，他的高度會也跟著增加，這才是我們需要的效果。
但要說明的是，在Firefox 和IE7 中，支援min-height 屬性，而IE6 中，並不支援min-height 屬性，但「歪打正著」的是，IE6 中，會把min-height 屬性解釋為height 屬性，但是IE6 中height 屬性的效果卻是min-height 本來應該具有的效果，也就是說，在IE6 中，子div 的高度會撐大父div 的高度。所以這樣正好可以實現在IE6、IE7 和Firefox 中都可以正確實現我們希望的效果了。
3：接下來，將#container 設定為相對定位（第9行），目的是使他成為它裡面的#footer 的定位基準，也就是所謂的「最近的定位過的祖先元素」。
4：然後把#foooter 設定為絕對定位（第17行），並使之貼在#container 的最下端（第18行）。
5：但要注意，如果當我們把#foooter 貼在#container 的最下端以後，他實際上已經和上面的#content 這個div 重疊了，為了避免覆蓋#content 中的內容，我們在#contetn 中設置了下側的padding，使padding-bottom 的值等於#footer 的高度（第13行），就可以保證避免覆蓋#content 的文字了，這個高度的計算注意程式碼中的註解中給出的計算方法（第14行）。