Question

关于底部的页脚有很多问题，但我无法找到解决这个问题的方法。

我有这种情况：

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

我希望Content 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;
}

工作原理：

由于高度：100％
#wrapper中的min-height属性使其扩展到全高，当内容高于100％时，#wrapper扩展到浏览器画布之外（滚动）。
#wrapper具有相对位置，因此#footer的绝对底部位置使页脚始终位于#wrapper的底部。
#content padding-bottom属性具有与#footer高度相同的值，可防止#footer和#content重叠，因为#footer将始终覆盖#wrapper的底部并覆盖#content，如果这样一个到达#wrapper的底部。你不能把这个属性放在#wrapper中，因为高度会导致100％（100％+填充）更大，而#footer会落在屏幕之外。
#wrapper而不是#content具有背景颜色属性，因为它始终是完全展开的。

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

1 个答案: