如何正確定位頁面底部的div？

Question

我的div像這樣：

<div class="container"> 
    <div class="header"></div> 
    <div class="body"></div> 
    <div class="footer"></div> 
</div> 

現在我用這種風格對我的容器和頁腳：

html, body { 
    height:100%; 
} 
div.container { 
    min-height: 100%; 
    position: relative; 
} 
div.footer { 
    width:100%; 
    height: 40px; 
    positioin: absolute; 
    bottom: 0px; 
} 

所以，頁腳保持在底部相對於頁面，這是件好事，但我發現了兩個問題：

1. 如果body div的內容太長，它會重疊頁腳！
2. 我希望頁腳的背景顏色跨越整個瀏覽器視圖端口，但目前它與容器div一樣寬。

任何想法如何解決這個問題？

Answer 1

我最好的提示是使用A CSS Sticky Footer，工作就像一個魅力。

Answer 2

將頁腳div放到容器外，並給予馬林頂:-(height：px）px ;.

<div class="footer"></div> 

html, body { 
    height:100%; 
} 
div.container { 
    min-height: 100%; 
} 
div.footer { 
    width:100%; 
    height: 40px; 
    margin-top:-40px; 
} 

Answer 3

你可能想嘗試bottom: -40px;。

bottom屬性定位您的元素，以便元素的底部被包含元素的底部偏移該量。因此，如果您的示例中有bottom: 0;，則元素的底部與其包含元素的底部對齊，因此它將與其重疊。

我希望頁腳的背景顏色跨越整個瀏覽器視圖端口，但目前它的寬度與它的容器div一樣寬。

這是因爲width: 100%;相對於所述元件，這是div.container（其被設置爲position: relative）的包含塊定義。您必須將其從容器中取出，或者不要將容器定義爲position: relative;來解決此問題。