Question

我有一个非常简单的困境，在我多年的发展过程中，我从来不知道最好的答案：

有一个固定高度的容器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;
}

示例图片（每个客户请求模糊的主要内容）： enter image description here

看到白色页脚下方的橙色条纹？我希望那是白色的。我们永远不知道那个空间的高度是多少。有什么建议？ CSS解决方案首选，但jQuery也可以使用。

Answer 1

如果您选择尝试使用任何类型的新对象填充空间，那么没有一致的方法可以保证每个浏览器都能满足您的剩余背景空间。

真正保证展开部分的唯一方法是你想要的颜色是设置身体的背景。

这有点像画墙 - 身体的背景通常是第一层。（除非你根据Carlo Cannas的答案在html上指定背景。）

橙色部分在逻辑上是“第二层”，它有点像贴在建筑工地周围墙上的音乐会海报。因此，如果您希望橙色为全宽，但其中包含固定的宽度内容，则需要两个容器，一个容器宽度为100％，另一个容器位于您选择的固定宽度内。

尝试围绕图层和嵌套的逻辑跳舞无济于事 - 就像试图创建莫比乌斯带一样。遵循严格的逻辑将使您对不同的浏览器更有信心。

+-----+--------------------------------------------+-----+
|     |                                            |     |  
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
|     |              Fixed Width                   |     |   <---  100% width
|     |                                            |     |         container
|     |           Content Container                |     |         (orange) 
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
+-----+--------------------------------------------+-----+
|                                                        |
|                       footer                           |
|                       (white)                          |
|                                                        |
+--------------------------------------------------------+

             remaining white background page

Answer 2

通常，设置为HTML body元素的背景将成为画布的背景，unless为transparent元素指定的背景与html不同。因此，请尝试将根元素的背景颜色设置为white。

如果您的body有边距，则可能需要对其进行调整，以获得正确的结果。

Answer 3

它可能被认为是一种解决方法，但它对我有用：

html {
    background: #fff;
}

之前：

之后：

Answer 4

编辑：我认为最好的选择是重新执行基础结构，因此HTML元素具有白色背景，并且橙色背景被添加到某个容器中。

Answer 5

我不确定具体的代码，但我认为可以使用

完成某些操作

$(window).height()

jQuery中的

。由于窗口高度总是100％通过调整那些东西和页脚我们可能会得到一个解决方案。这可能不是最有用的评论，因为我不是真正的jQuery专家，但我希望这会有所帮助。

Answer 6

难道你不能只改变一点结构吗？例如，将内容转换为另一个div。

HTML：

<div class="container">
    <div class="content">Container Content</div>
    <div class="footer">Footer Content</div>
</div>

CSS：

body {
    background: #fff url(image.png) no-repeat;
}
.container {
    height: 1200px;
    margin: 0 0;
    width: 960px;
}
.container .content {
    background-color: #ffaa00;
}
.container .footer {
    background-color: #fff;
    height: 120px;
}

小提琴：http://jsfiddle.net/AbG62/

Answer 7

如何将.footer从.container div中删除。然后将.footer包装在宽度为100％的.footerwrapper中，背景色：#FFF;像这样：

<body>
<div class="container">
    Container Content  
</div>
<div class="footwrapper">
    <div class="footer">
        Footer Content
    </div> 
</div> 
</body>

和CSS：

body {
    background: #ffaa00 url(image.png) no-repeat;
    padding: 0;
    margin: 0;
}
.container {
    height: 1200px;
    margin: 0 auto;
    width: 960px;
}
.footer {
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
    height: 120px;
}

.footwrapper {
    width: 100%;
    background-color: #fff;
}

这是Jfiddle：http://jsfiddle.net/3Erqf/

仅限下方页脚的背景颜色（未知区域高度）

7 个答案: