Login/Register
Background color for below footer only (unknown height of area)
Asked Answered
Solved htmlcssbackground-color
M

7

6

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): enter image description here

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.

Mimesis answered 16/12, 2013 at 22:4 Comment(2)
You can take the footer out of the container and set the container's background colour as orange. Remove orange from body – Benjy
Please clarify why you are determined to keep the body orange instead of using an orange container. You seem to be stuck with the idea that the footer is a 'floating' or nested object, rather than the linear conclusion of the document. It makes far more sense as a white document with an orange top. Making an orange document with a white bottom invokes too many issues. HTML was not designed to be rigid. Fixed and absolute positioning are compromises that come with risks. Trying to fill 100% of the remaining space requires JavaScript, CSS hacks for different browsers and other ugliness. – Shrier
S
5

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
Shrier answered 16/12, 2013 at 22:36 Comment(4)
You wrote body's background is always the first coat. Well, it isn't always true, give a look at my answer. – Cacoepy
That's fair, I have changed it to usually - I'm reasonably confident body has been the convention for the base layer since the earliest days of html. Setting a background on <html> would have to be a fairly recent wouldn't it? – Shrier
I know it's odd and uncommon, however this rule exists since early days of CSS: give a look at the CSS1 specs (1996, not exactly recent, right?) w3.org/TR/REC-CSS1-961217.html#the-canvas. – Cacoepy
Thanks a lot; worked like a charm; I particularly like your "first coat" analogy. – Semblable
C
2

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.

Cacoepy answered 16/12, 2013 at 22:6 Comment(0)
A
2

It may be considered as a work-around, but it works for me:

html {
    background: #fff;
}

Before:

enter image description here

After:

enter image description here

Almaraz answered 29/4, 2020 at 7:9 Comment(0)
T
0

EDIT: I think that the best option is to re-do your base structure, so your HTML element has white background, and the orange background is added to some container.

Trinitarianism answered 16/12, 2013 at 22:19 Comment(1)
@IvanDurst the idea was different, but I did not tested it first and it was wrong anyway. Edited my comment, I think the best will be if the general structure is different. – Trinitarianism
M
0

I'm not sure of the exact code but I think something could be done using the 

$(window).height()

in jQuery. Since the window height is always 100% by tweaking that stuff and the footer we may arrive at a solution. This might not be the most helpful of comments because I'm not really a jQuery expert but I hope this helps.

Murmur answered 3/3, 2016 at 20:15 Comment(0)
E
-1

Can't you just change the structure a little bit? Take the contents into another div for example.

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;
}

Fiddle: http://jsfiddle.net/AbG62/

Emelinaemeline answered 16/12, 2013 at 22:13 Comment(2)
The #ffaa00 background color has to stretch the full page width, not the width of the container – Mimesis
Imo, if you don't want any of the background color to be visible on bottom, you just shouldn't set a background color of the body, but just put all the contents in divs. – Emelinaemeline
O
-1

How about take the .footer out of the .container div. And then wrap the .footer in a .footerwrapper with width 100%, background-color: #FFF; like so:

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

And 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;
}

Here's the Jfiddle: http://jsfiddle.net/3Erqf/

Octant answered 16/12, 2013 at 22:30 Comment(1)
This still has the problem of the example image. – Cacoepy

© 2022 - 2024 — McMap. All rights reserved.