使用CSS定位頁面的“footer”

基本思路

首先考慮外層設定一個容器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行）。