100% Div Height Issue

18,886

Solution 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.

Solution 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!

Solution 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.

Share:
18,886
Awais Imran
Author by

Awais Imran

Updated on June 04, 2022

Comments

  • Awais Imran
    Awais Imran almost 2 years

    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