Height and Min-Height

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

What's the difference?

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.

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.

Demonstration

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

Percentage Min-Heights

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.

Demonstration

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.

Related Links:

• min-height for MSIE/Win
• Internet Explorer and the Expanding Box Problem
• CSS min-height Explained
• Explaining width and height
• The overflow declaration