沒有滾動條時將頁腳放在底部？

Question

我有一個包含使用php include函數的元素的div，下面我有一個頁腳。只有當您滾動到頁面底部時，頁腳纔可見，以節省空間。

問題是，如果內容高度很小（例如300px），那麼頁腳不會放在頁面的底部，這會使佈局看起來不太好。

所以我的問題是，當瀏覽器窗口上沒有滾動條（意思是內容div高度很小）時，我可以將頁腳定位在底部嗎？

Answer 1

這隻能用JavaScript來完成，因爲服務器（PHP）無法知道窗口的高度。也就是說，這當然可以做到：如果內容小於瀏覽器窗口的高度，則可以例如在頁腳div上設置position:fixed和bottom: 0px，將其粘貼到窗口的底部;否則，只需讓它位於內容的底部即可。

Answer 2

聽起來像一個sticky footer是你在找什麼：

HTML：

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

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

CSS：

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; } 

body > #wrap { 
    height: auto; 
    min-height: 100%; 
} 

#main { 
    padding-bottom: 40px; /* must be same height as the footer */ 
} 

#footer { 
    position: relative; 
    margin-top: -40px; /* negative value of footer height */ 
    height: 40px; 
    clear:both; 
    background: #c00; 
} 

Fiddle here.

這將允許footer div to b e位於窗口底部的至少;隨着內容div增長main，它會相應地降低頁腳。