粘性頁腳+固定寬度+背景顏色

Question

關於頁腳底部有很多問題，但我找不到解決方案。

我有這樣的場景：

footer at bottom http://www.cucuza.com/gustavo/footer2.jpg

我想要的內容div來擴展以滿足頁腳的頂部邊緣。

頁腳必須具有粘性頁腳行爲：當頁面高度小於視口時，頁腳必須位於視口底部，並且當頁面高度比視口長時，頁腳必須停留在頁面的底部。

Answer 1

雖然我寫的問題，我想出瞭解決方案：

這是一個live demo。

footer at bottom http://www.cucuza.com/gustavo/footer3.jpg

，這是代碼：

HTML：

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="content">Content</div> 
    <div id="footer">Footer</div> 
</div> 

CSS：

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
    background:#ccc; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
    width: 500px; 
    margin: 0 auto; 
    background:#fff; 
} 
#header { 
    background:#5ee; 
} 
#content { 
    padding-bottom:80px; 
    min-height:100%; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
} 

工作原理：

• 由於高度，html和body保持展開：100％
• #wrapper中的min-height屬性保持展開到全高，當內容高於100％時，#wrapper擴展到瀏覽器之外畫布（滾動）。
• #wrapper具有相對位置，因此#footer的絕對底部位置始終使頁腳始終位於#wrapper的底部。
• 具有與#footer高度相同的值的#content padding-bottom屬性可防止#footer和#content重疊，因爲#footer將始終覆蓋#wrapper的底部並覆蓋#content，如果此操作一個到達#wrapper的底部。你不能把這個屬性放在#wrapper中，因爲高度會導致100％（100％+ padding）和#footer超出屏幕。
• #wrapper，而不是#content，具有背景顏色屬性，因爲它是始終完全展開的屬性。