仅限底部页脚的背景颜色（面积未知高度）
我有一个非常简单的困境，我从来不知道在我所有这些年的发展中最好的答案：
有一个固定高度的容器div，其中还包含页脚（没有粘脚），背景颜色为白色。 页脚也是一个固定的高度。 身体包含一个淡出颜色的背景图像，可以说是橙色。 在高身材的浏览器上，页脚下方会有空间，这也是橙色的身体颜色。 我如何才能在页脚下方的空白处留下白色，而不会影响页脚上方的身体颜色？
以下是一些HTML示例：
<body>
<div class="container">
Container Content
<div class="footer">
Footer Content
</div>
</div>
</body>
和CSS：
body {
background: #ffaa00 url(image.png) no-repeat;
}
.container {
height: 1200px;
margin: 0 auto;
width: 960px;
}
.footer {
background-color: #fff;
height: 120px;
}
示例图片（每个客户端请求模糊主要内容）： 
看到白色页脚下面的橙色条纹？ 我希望那是白色的。 我们永远不知道这个空间的高度是多少。 有什么建议么？ 首选CSS解决方案，但jQuery也可能工作。
如果您选择尝试使用任何种类的新对象来填充空间，那么没有一致的方法可以保证每个浏览器都能够满足您的满意度。
要真正保证展开的部分的唯一方法是您想要设置背景的颜色。
这有点像画墙 - 身体的背景通常是第一件大衣。 （除非你在下面的Carlo Cannas的答案中指定html的背景。）
橙色部分在逻辑上是'第二层'，有点像一张贴在建筑工地周围墙上的音乐会海报。 所以，如果你想要橙色是全宽，但其中有固定宽度的内容，你需要两个容器，一个宽度为100％，一个在你选择的固定宽度内。
试图围绕图层和嵌套的逻辑跳舞将无济于事 - 这就像试图创建一个莫比乌斯带。 遵循严格的逻辑会给你更多的信心在不同的浏览器。
+-----+--------------------------------------------+-----+
| | | |
| | | |
| | | |
| | | |
| | | |
| | Fixed Width | | <--- 100% width
| | | | container
| | Content Container | | (orange)
| | | |
| | | |
| | | |
+-----+--------------------------------------------+-----+
| |
| footer |
| (white) |
| |
+--------------------------------------------------------+
remaining white background page
通常，设置为HTML body元素的背景将成为画布的背景，除非您为html元素指定了不同于transparent的背景。 所以尝试将根元素的背景颜色设置为white 。
如果你的body有边距，你可能需要调整它们，以获得正确的结果。
编辑：我认为最好的选择是重新做你的基础结构，所以你的HTML元素有白色背景，橙色背景被添加到一些容器。
链接地址: http://www.djcxy.com/p/89295.html上一篇: Background color for below footer only (unknown height of area)