[SOLVED] Min-Height: X% Doesn't Work?

[FlyingIsFun1217]

Hey!

 

I've got a div that is supposed to be filling the users browser screen, until something comes to expand it. So what I have is:

 

#mainContent
{
width:				100%;
height:				auto;
min-height:			        70%;
background:			#D2D6F5;
}

 

The rest of the divs that are stacked by it, add up to 30%, so I figured as long as the min-height is 70%, it'll fill it up (until it needs to grow). Thing is, obviously it isn't working (else I wouldn't be here!), I'm assuming because of the value. Do the values for min-height need to be in pixels, not percentages? If so, is there any way that I can get it to expand to 70% of the browser real estate?

 

Thanks!

FlyingIsFun1217

[FlyingIsFun1217]

Just a note, the attribute min-height apparently needs it's parent container to have a set height, so I added to 'body': 'height: 100%', yet it still doesn't work!

 

FlyingIsFun1217

[FlyingIsFun1217]

Ahh, was just missing a ';' after my height: 100% in the body.

 

For anybody else wanting to fill the rest of a page with a div that can expand:

 

body {height: 100%;}
#divContainer {min-height: X%; height: auto;}

 

FlyingIsFun1217