100% Div Height Issue

Question

I have two containers ( main-container and sub-container ). Body, HTML and main-container have classes of 100% height whereas sub-container fixed in 1000px . Main-container should be fit with 100% height in the whole screen even sub-container is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement.

http://jsfiddle.net/awaises/dLeHL/

Really appreciate your help.

Thanks

Answer 1

change height:100%; to min-height:100%; in .main-container : http://jsfiddle.net/dLeHL/3/

EDIT:

Percentage heights rules are explained here :

Percentage Heights If the height of an element is set to a percentage, it needs for its parent element to have a set height. In other words, the height of the parent element can't be set to auto. Like many aspects of CSS, this is a bit confusing at first.

Answer 2

Is this what you're trying to achieve?

I change the width of the .sub-container in order to be in % like the .main-container .

CSS markup:

html, body { 
    height:100% 
}
.main-container { 
    height:100%; 
    background:red; 
}
.sub-container { 
    height:100%; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
}

Hope it helps!

Answer 3

You don't need to set the height for the .main-container (by default it will expand to the size of the child container). By setting the height to 100% you are forcing it to be the height of the screen and no more. So just change it to:

.main-container { background:red; }

If you need the main container to always be at least the height of the screen, use @Helstein's suggestion of setting the min-height to 100% while removing the height setting.