Background color for below footer only (unknown height of area)

2018-07-02 00:45:23

I have a very simple predicament that I've never know the best answer to in all my years of developing:

There is a fixed-height container div, which also contains the footer (so no sticky footer) with a background color of white. The footer is also a fixed height. The body contains a background image that fades to a color, lets say orange. On tall browsers, there will be space below the footer, which will also be the orange body color. How do I make just that space below the footer white, without affecting the body color above the footer?

Here's some example HTML:

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

and CSS:

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

Example image (main content blurred per client request): 在这里输入图像描述

See the orange stripe below the white footer? I'd like that to be white. We never know what the height of that space is. Any suggestions? CSS solutions preferred, but jQuery might work too.

There's no consistent way to guarantee that every browser will fill the remaining background space to your satisfaction if you choose to go down the path of trying to use a new object of any sort to fill the space.

The only way to really guarantee the expanded section is the color you want is to set the background of body.

It's a bit like painting a wall - body's background is usually the first coat. (Unless you specify a background on html as per Carlo Cannas's answer below.)

The orange section is logically the 'second layer' it's a bit like a concert poster pasted on the wall around a building site. So if you want the orange to be full width, but have fixed width content within it, you need two containers, one at 100% width, and one within it at your chosen fixed width.

Trying to dance around the logic of layers and nesting won't help - it's like trying to create a Möbius strip. Following strict logic will give you much more confidence in different browsers.

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

             remaining white background page

Usually background set to the HTML body element becomes the background of the canvas, unless you specify a background different from transparent for the html element. So try to set the background color for the root element to white .

If your body has margins you may need to tweak them, in order to have the correct result.

编辑：我认为最好的选择是重新做你的基础结构，所以你的HTML元素有白色背景，橙色背景被添加到一些容器。

链接地址: http://www.djcxy.com/p/89296.html

上一篇: Android，在将.gif加载到Webview时如何去除多余的空白区域

下一篇: 仅限底部页脚的背景颜色（面积未知高度）