100% Div Height Issue
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.
Awais Imran
Updated on June 04, 2022Comments
-
Awais Imran almost 2 years
I have two containers (
main-container
andsub-container
). Body, HTML and main-container have classes of100%
height whereassub-container
fixed in1000px
. Main-container should be fit with100%
height in the whole screen evensub-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