粘性页脚+固定宽度+背景颜色

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，具有背景颜色属性，因为它是始终完全展开的属性。