colorandy讀者提出這樣一個關於頁面配置的問題：
“如果有一個footer層，我想讓他固定出現在整個頁面的最下方，不隨著頁面中的內容而變化，CSS中要怎樣設？比如裡面是一些著作權資訊。因為我整頁的內容比較少，footer老跟著內容跑到上面去，很不美觀。”
這個問題如果在以前使用表格版面配置，並不困難，只要給頁面的最外層表格高度設定為100%就可以了，然而，在Web標準的規範中，表格的高度已經屬於廢止的屬性，應該避免使用，而且使用Web標準以後，也不在提倡使用表格版面配置了，那麼是否有辦法使用CSS來實現頁面的頁尾部分固定在瀏覽器底端呢？
下面就來講解它的實現方法。
首先考慮外層設定一個容器div，id設為#container，使他的高度為瀏覽器視窗的高度，然後將#footer這個div設定為#container的子div，並使用絕對位置的方式，使他固定到#container的底端，以實現希望的效果。
點擊這裡察看案例頁面效果。 改變瀏覽器的高度和寬度，可以看到Footer部分的效果。
下面先考慮HTML結構，這個示範頁面的HTML代碼非常簡單。
123456789101112 |
<body><div id="container"><div id="content"><h1>Content</h1><p>請改變瀏覽器視窗的高度，以觀察footer效果。</p><p>這裡是樣本文字，………，這裡是樣本文字。</p></div><div id="footer"><h1>Footer</h1></div></div></body> |
然後設定CSS，
123456789101112131415161718192021222324252627 |
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: 10px0;background-color: #AAA;width: 100%;}#footer h1 {font: 20px/2 Arial;margin:0;padding:010px;} |
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屬性，但是“歪打正著”的是，IE 6中，會把min-height屬性解釋為height屬性，但是IE 6中height屬性的效果卻是min-height本來應該具有的效果，也就是說，在IE 6中，子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行）。
6：剩下的就沒有更多技術需要解釋了。如果讀者對上面的解釋還不十分理解，說明您對CSS的基本概念還瞭解得不夠，先仔細把CSS的核心原理和基本概念徹底搞清楚，再來看這些代碼就是很輕鬆的了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
