最近因為需要，所以研究了固定頁腳的語法，順便記錄一下。
首先，你的網頁一定要是包在這個架構：

<div id="wrap">
     <div id="main">
     </div>
</div>

<div id="footer">
</div>

再來是上面那段如果看不懂，請看下列重點提要：

1.wrap的div，包的是整個body的html，而裡面的main的div，包的是你的header。
2.footer的div包的是你的頁腳的html.

接著在你的css.style（或你設定css的地方）加入下列語法:

html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 150px;/* 高度要和你的頁腳一樣 */
} 
#footer {
position: relative;
margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
height: 150px;
clear:both;} 

/*Opera Fix*/
body:before {
     content:"";
     height:100%;
     float:left;
     width:0;
     margin-top:-32767px;/
}

<!--[if !IE 7]>
     <style type="text/css">
          #wrap {display:table;height:100%}
     </style>
<![endif]-->



p.s.
如果你的網頁header是寫在php裡的，
那麼 <div id="main"></div> 這行就不用加了，
直接包這個：
<div id="wrap">
</div>

<div id="footer">
</div>


----------------------------  

7/7補充： 

此用法是網路上參閱了幾篇文章整理出來的，
後來發現這樣的設定方式有時候對應到不同電腦螢幕高度，頁腳會產生吃掉頁面的問題
主要是#wrap和#footer中的兩項css在作祟：

#wrap {
min-height: 100%;
}
#footer {
margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
}

後來我調整了這兩項，改成
#wrap {
min-height: 79.1%;
}
(請自行調整數質,用755px之類的也行，但使用%數更能準確適應各種螢幕高度)

#footer {margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
margin-top: 50px;
}
(沒錯,margin-top:-150px這項設定完全刪掉,
後面的margin-top:50px是我自己多加的,不一定要,如果頁面跟頁腳黏太緊可以加一下)


以上,就完全克服了全部頁腳亂吃頁面或有些出現疊來疊去的困擾～～～（歡樂）