CSS頁腳，停留在頁面底部而不是屏幕底部

Question

我似乎無法找到如何在頁面底部放置div（頁腳）而不是屏幕。我看到很多答案都說絕對是固定的，但是會將頁腳引到屏幕的底部和頁面中間。

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

CSS 
#footer{ 
bottom: 0; 
} 

所以爲了簡化問題：如何將頁腳放在頁面底部而不是屏幕上。

Answer 1

如果您使用position：absolute;頁腳將在其他元素上，並且不會按照頁面的元素順序。比如，如果你使用position：fixed ;,那麼它肯定會處於FIXED位置，這不是你想要的結果。

所以不要使用絕對位置或固定位置;

如果頁腳是頁面的最後一個元素，它將自動成爲頁面的最後一個元素。

Answer 2

你覺得在粘腳？ :)

或者你只是想頁腳內容後，才使

footer { 
position: relative; 
} 

Answer 3

如果你得到的HTML，不能手動修改它，你可以用JS（和JQuery做，但可以在不它）：jsFiddle

$(function() { 
    $('body').append($('#footer').detach()); 
}); 

Answer 4

如果不指定任何風格的頁腳，並將其作爲您的主體內容之後的最後一個元素，它會留在頁面的底部。

假設你的正文內容太短覆蓋頁面的整個高度（不管是什麼原因，也許沒有內容），但你仍想保​​留頁腳在頁面的底部，可以read this short tutorial或see the demo。如果您的內容長於視口高度，則此頁腳仍將保留在頁面底部，並且不固定到視口。

基本上，您需要使頁腳上方的內容或容器佔據視口高度的100％。然後，將頁腳下面的CSS內容/容器後：

#footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 3em; 
    margin-top: -3em; 
} 

這裏會發生什麼事是，頁腳將佔據3EM高度，但你「拉」回來具有相同的價值，但負margin-top。這是clear編輯，以確保沒有兩側的元素，但你可以排除這一點。

然後，爲了防止它在您的內容上重疊，內容或內容本身的容器應具有相同值（在本例中爲3em）的padding-bottom。