Many people find how height
and min-height
work
in CSS2 to be confusing. It doesn't help that IE5-6/Win don't handle height
properly (IE5-6/Win often treat height
like min-height
) and don't support min-height
. (They've more or
less fixed how IE7 handles these when it's in Standards Compatibility mode.)
When the height
property is set to a value other than "auto" it
means that the element's height should always be that value, no matter how much
room its contents needs. But when the min-height
property is set,
it means that the element's height should be at least that high but may
increase if the content needs more room. It gets a little more complicated than
that when you use percentages, though, as you'll see momentarily, if you
haven't already run into it before.
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.
IE5.0/Win, IE5/Mac, and Netscape 6.x and 7.0 (and I assume the equivalent verisions of Mozilla) render this first example incorrectly. Opera 7.x, with the exception of 7.0x, renders the second example incorrectly — the inner element doesn't expand to the full height of its parent as it should.
The outer element in both of these examples each has a dark gray border set so that you can see where it is in both. An element with a yellow background is floated to the right to make the outer element in these first two examples have a minimum height of 5em. (By the way, this is how to simulate min-height in Safari 1.0 - 1.2.) I gave it a background-color and a width so that you can see it. (The yellow element doesn't affect the height of the outer element in the second example, because the outer element has a set height.)
height
is set to 100% and its parent's
height
is set to auto.height
is set to 100% and its parent's
height
is set to 5em.As with height
, if the min-height
of an element
is set to a percentage, it needs for its parent element to have a set height
.
This demonstration won't display correctly in IE5-6/Win, IE5/Mac, or Safari version before 1.3. Opera 7.x doesn't display this correctly either. Opera 8.x and 9.0 are closer, but for the one with the set height (example 4) the inner element overlaps the bottom border. Apparently they are adding the top and bottom border widths to the height calculation for the inner element.
The outer element in both of these examples each has a dark gray border set so that you can see where it is in both.
min-height
is set to 100% and its parent's
min-height
is set to 5em.min-height
is set to 100% and its parent's
height
is set to 5em.