Extend Container for Short Pages Down to Footer

[questions]

I have a "container" into which all the webpage info (text, photos) is placed, that's centered within a "wrap" of a different color.
The "wrap" extends the width of the whole webpage.

On short pages, or pages that don't have a lot of information on them, the "wrap" / "wrap" color comes between the (bottom) end of the "container" and the "footer".

Is there something I can place there, at the bottom of the "container" maybe, that will stretch it automatically to down all the way to the top of the "footer," so the color of the "wrap" doesn't come between them?

I have thought of using many <br>'s to fill the page, but everyone's monitors are different sizes, so what will fit on the supertall monitors will end up being ridiculously long empty space on the shorter monitors.

I hope this makes sense.


Here is the css code:



html, body {
height: 100%;
margin: 0;
padding: 0;
}

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}

body {
background-color: #999;
margin: 0;
padding: 0;
border: 0;
font: 100%;
line-height: 1;
}

/* This is the container */
#content {
top: -28px;
clear both;
background: #eee;
overflow:auto;
height: 100%;
padding-bottom: 85px;
}

/* Same color as content container, to look continuous.*/
#footer {
clear: both;
height: 60px;
background: #eee;
}


Thanks!

[developerhusain]

html{min-height:100%;position:relative}/* make sure it is at least as tall as the viewport */
body{height:100%}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1
}
you can do it like this.

developerahusain

[questions]

I'm sorry, I don't understand.
But I see it is the same advice given on this thread:
http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height

[questions]

What worked is to specify the html height this way, separate of the body or other heights.

So I took out the height of body, the #wrap, and the #content.



html {min-height: 100%;}