Question
height:100% VS min-height:100%
I use this css to set a <div>
to maximum height
Can anyone give me a general answer, what's the difference between height: 100%
and min-height: 100%
?
Question
I use this css to set a <div>
to maximum height
Can anyone give me a general answer, what's the difference between height: 100%
and min-height: 100%
?
Solution
Here's an explanation from the W3C (link):
The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:
The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.
To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.
For the specific case you give, specifying height:100%
makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%
.) Specifying min-height:100%
means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%
. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).
Solution
height: 100%
will go to 100% of the container height; min-height: 100%
should expand past the container's height if it needs too.
Keep in mind that min-height is not supported in IE.