這里還有一種實(shí)現(xiàn)技術(shù)：http://code.google.com/p/cleanstickyfooter/
“如果有一個(gè)footer層，我想讓他固定出現(xiàn)在整個(gè)頁(yè)面的最下方，不隨著頁(yè)面中的內(nèi)容而變化，CSS中要怎樣設(shè)？比如里面是一些版權(quán)信息。因?yàn)槲艺?yè)的內(nèi)容比較少，footer老跟著內(nèi)容跑到上面去，很不美觀。”
這個(gè)問(wèn)題如果在以前使用表格布局，并不困難，只要給頁(yè)面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標(biāo)準(zhǔn)的規(guī)范中，表格的高度
已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，而且使用Web標(biāo)準(zhǔn)以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來(lái)實(shí)現(xiàn)頁(yè)面的頁(yè)腳部分固定在瀏覽器底端
呢？
下面就來(lái)講解它的實(shí)現(xiàn)方法。
基本思路
首先考慮外層設(shè)置一個(gè)容器div，id設(shè)為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個(gè)div設(shè)置為#container的子div，并使用絕對(duì)定位的方式，使他固定到#container的底端，以實(shí)現(xiàn)希望的效果。
點(diǎn)擊這里察看案例頁(yè)面效果。 改變?yōu)g覽器的高度和寬度，可以看到Footer部分的效果。
代碼實(shí)現(xiàn)
下面先考慮HTML結(jié)構(gòu)，這個(gè)演示頁(yè)面的HTML代碼非常簡(jiǎn)單。
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>請(qǐng)改變?yōu)g覽器窗口的高度，以觀察footer效果。</p>
<p>這里是示例文字，………，這里是示例文字。</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
然后設(shè)置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;
}
要點(diǎn)分析
1：首先要給html和body元素設(shè)置高度（height屬性）為100% （第5行），這樣先保證根元素的高度撐滿整個(gè)瀏覽器窗口，然后下面才能使#container的高度撐滿整個(gè)瀏覽器窗口。
至于為什么用同時(shí)設(shè)置html和body元素，是因?yàn)镕irefox和IE認(rèn)為的根元素不一樣，因此這里都給他們?cè)O(shè)置上。
2：然后把#container的高度也設(shè)置為100%
（第8行），但是要注意，這里使用了“min-height”屬性，而不是普通的height屬性，這是因?yàn)槲覀円紤]到，如果#content中的內(nèi)容
如果增加了，他的高度超過(guò)了瀏覽器窗口的高度，那么如果把#container的高度仍然是100%，就會(huì)導(dǎo)致#footer仍然定位在瀏器窗口的下端，
從而遮蓋了#content中的內(nèi)容。
而使用min-height屬性的作用就是使#container的高度“至少”為瀏覽器窗口的高度，而當(dāng)如果它里面的內(nèi)容增加了，他的高度會(huì)也跟隨著增加，這才是我們需要的效果。
但是需要說(shuō)明的是，在Firefox和IE7中，支持min-height屬性，而IE6種，并不支持min-height屬性，但是“歪打正著”
的是，IE 6中，會(huì)把min-height屬性解釋為height屬性，但是IE
6中height屬性的效果卻是min-height本來(lái)應(yīng)該具有的效果，也就是說(shuō)，在IE
6中，子div的高度會(huì)撐大父div的高度。所以這樣正好可以實(shí)現(xiàn)在IE6、IE7和Firefox中都可以正確實(shí)現(xiàn)我們希望的效果了。
3：接下來(lái)，將#container設(shè)置為相對(duì)定位（第9行），目的是使他成為它里面的#footer的定位基準(zhǔn)，也就是所謂的“最近的定位過(guò)的祖先元素”。
4：然后把#foooter設(shè)置為絕對(duì)定位（第17行），并使之貼在#container的最下端（第18行）。
5：但是要注意，如果當(dāng)我們把#foooter貼在#container的最下端以后，他實(shí)際上已經(jīng)和上面的#content這個(gè)div重疊了，為
了避免覆蓋#content中的內(nèi)容，我們?cè)?contetn中設(shè)置了下側(cè)的padding，使padding-bottom的值等于#footer的高
度（第13行），就可以保證避免覆蓋#content的文字了，這個(gè)高度的計(jì)算注意代碼中的注釋中給出的計(jì)算方法（第14行）。
6：剩下的就沒(méi)有更多技術(shù)需要解釋了。如果讀者對(duì)上面的解釋還不十分理解，說(shuō)明您對(duì)CSS的基本概念還了解得不夠，先仔細(xì)把CSS的核心原理和基本概念徹底搞清楚，再來(lái)看這些代碼就是很輕松的了。
點(diǎn)擊這里察看案例頁(yè)面效果。
案例總結(jié)
這個(gè)看起來(lái)并不復(fù)雜的代碼，去包含了很多CSS的核心概念和原理，因此這里又回到了我們?cè)?jīng)多次給讀者的建議上：一定要扎扎實(shí)實(shí)把CSS的核心原理
搞清楚，特別是CSS的4大核心基石：盒子模型、標(biāo)準(zhǔn)流、浮動(dòng)、定位。只有把這些核心基礎(chǔ)掌握到爛熟于胸的程度，才能游刃有余地進(jìn)行設(shè)計(jì)。
原理：為了讓瀏覽器識(shí)別高度為100%，設(shè)置html、body的height:
100%，同時(shí)把所有元素的margin和padding設(shè)置為0，這樣就等于整個(gè)瀏覽器窗口的總高度了，把footer置于最下方，這是footer就
超出這“100%”的范圍了，為讓footer
能夠剛好在最下方，給footer加一個(gè)等于自身高度的上方的負(fù)邊距（負(fù)的margin）強(qiáng)制把它向上推一個(gè)自身的高度，即 margin-top:
負(fù)的數(shù)值;
。但當(dāng)內(nèi)容超過(guò)一屏?xí)l(fā)現(xiàn)內(nèi)容會(huì)覆蓋在footer的上方。所以還要給內(nèi)容部分設(shè)置下方內(nèi)補(bǔ)丁等于footer的高度，強(qiáng)制把內(nèi)容部分向上推一個(gè)
footer的高度就OK了。（參考文章）