html - 设置页脚宽度

Question

您好，我遇到了以下问题。我在页脚中嵌入了宽度和高度。到目前为止，页脚还没有背景色。现在我想是让页脚在整个宽度上拉伸(stretch)并给它一个背景颜色。

我的问题是，我不知道如何让页脚填充一种颜色，这种颜色很容易简单地说“reapeat-x”那种颜色。我用我的背景 body 做到了。我无法轻松创建图像，因为主页的内容未固定为一个高度。我也想知道如何实现这个例子的页脚保持在底部？

我找到了一个示例，当您在此页面上调整解决方案大小时，您可以在其中明白我的意思:

http://razzi.me/tour

希望这可以清楚地说明我要实现的目标。如果有人可以帮助我，我将不胜感激。

非常感谢。

Answer 1

要实现此效果，您需要将页脚放在 wrapper 之外。我通常使用这个 sticky footer .

HTML

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

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    margin: 0 auto -50px;
    width: 960px;
}
.footer, .push {
    height: 50px;
}

.footer {
    width: 100%;
    background: blue;
}

JS fiddle :http://jsfiddle.net/3KDYX/