這里還有一種實現技術：http://code.google.com/p/cleanstickyfooter/
“如果有一個footer層，我想讓他固定出現在整個頁面的最下方，不隨著頁面中的內容而變化，CSS中要怎樣設？比如里面是一些版權信息。因為我整頁的內容比較少，footer老跟著內容跑到上面去，很不美觀。”
這個問題如果在以前使用表格布局，并不困難，只要給頁面的最外層表格高度設置為100%就可以了，然而，在Web標準的規范中，表格的高度
已經屬于廢止的屬性，應該避免使用，而且使用Web標準以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來實現頁面的頁腳部分固定在瀏覽器底端
呢？
下面就來講解它的實現方法。
基本思路
首先考慮外層設置一個容器div，id設為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個div設置為#container的子div，并使用絕對定位的方式，使他固定到#container的底端，以實現希望的效果。
點擊這里察看案例頁面效果。 改變瀏覽器的高度和寬度，可以看到Footer部分的效果。
代碼實現
下面先考慮HTML結構，這個演示頁面的HTML代碼非常簡單。
<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>
然后設置CS
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屬性，但是“歪打正著”
的是，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的核心原理和基本概念徹底搞清楚，再來看這些代碼就是很輕松的了。
點擊這里察看案例頁面效果。
案例總結
這個看起來并不復雜的代碼，去包含了很多CSS的核心概念和原理，因此這里又回到了我們曾經多次給讀者的建議上：一定要扎扎實實把CSS的核心原理
搞清楚，特別是CSS的4大核心基石：盒子模型、標準流、浮動、定位。只有把這些核心基礎掌握到爛熟于胸的程度，才能游刃有余地進行設計。
原理：為了讓瀏覽器識別高度為100%，設置html、body的height:
100%，同時把所有元素的margin和padding設置為0，這樣就等于整個瀏覽器窗口的總高度了，把footer置于最下方，這是footer就
超出這“100%”的范圍了，為讓footer
能夠剛好在最下方，給footer加一個等于自身高度的上方的負邊距（負的margin）強制把它向上推一個自身的高度，即 margin-top:
負的數值;
。但當內容超過一屏會發現內容會覆蓋在footer的上方。所以還要給內容部分設置下方內補丁等于footer的高度，強制把內容部分向上推一個
footer的高度就OK了。（參考文章）