Geek Answers Handbook

Background color for footer (unknown region height)

I have a very simple difficulty that I never know, the best answer for all the years of my development:

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

Here is an 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 is blurry at the request of the client): enter image description here

. ? , . , . - ? CSS-, jQuery .

+4
6

, , .

- , , - .

- . ( html .)

" " , . , , , , , 100% .

- . , .

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

             remaining white background page
+4

, HTML body, , , transparent html. white.

body , , .

+1

EDIT: , - , HTML , - .

0

, , -

$(window).height()

jQuery. 100% , . , jQuery, , .

0

Can't you change the structure a bit? Take the content in 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/

-1
source

How about taking .footer from div.container. And then wrap .footer in .footerwrapper 100% wide, background-color: #FFF; 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 Jfiddle: http://jsfiddle.net/3Erqf/

-1
source

More articles:


All Articles