更改页面其余部分的颜色

Question

我在正在建设的网站上遇到问题。

并非所有页面都足够长以填充整个浏览器，底部会留下白色。您可以在下面的图片中看到问题。

您可以看到网页下方有空白区域。

实际上我想扩展页脚以填充页面的其余部分。

请注意，设置HTML的颜色仅适用于FireFox。

以下是我的相关CSS代码

http://hastebin.com/itaniparuz.css

此外，下面是我的示例图片中使用的页面的HTML：

http://hastebin.com/nedipipibi.xml

上面的代码有点乱，因为我不得不用它们包含的代码替换一些包含但是我认为它清楚地看到页面是如何编码的。

有关最佳方法的建议吗？

答案：我通过添加

来修复此问题

min-height: 100vh;
background-color: #3D3D3D;

到body div然后重新调整一些HTML。

Answer 1

添加以下CSS：

body {
    min-height: 100vh;
}

这将使您的页面高度至少等于视口的高度。

更新：正如评论中提到的Panther一样，请检查this是否兼容浏览器。

更新2：当然，如果页脚粘在底部，这只能达到您的预期效果。有关将页脚粘贴到页面底部的CSS，请参阅Keith Tomas's answer。

Answer 2

如果页脚背景颜色为暗灰色，请将此颜色设置为body。白色背景将设置为#content部分。看左/右填充和负边距的技巧。

<style>
    body {margin: 0; background: #333;}
    #outer {overflow: hidden;}
    #wrapper {width: 980px; margin: 0 auto;}
    #content {margin: 0 -1000px; padding: 20px 1000px; background: white;}
    #footer {color: #fff; padding: 20px 0;}
</style>

<div id="outer">
    <div id="wrapper">
        <div id="content">content<br>content<br>content<br>content<br>content<br>content</div>
        <div id="footer">footer</div>
    </div>
</div>

http://jsfiddle.net/6e84awv4/

Answer 3

您还可以使用以下内容将页脚向下移动到底部：

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}