Menu
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.
997
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
