height (CSS property)

Description

This property sets the content height of a block or a replaced element. This height does not include padding, borders, or margins—see The CSS Box Model.

If the contents of a block require more vertical space than is afforded by the height you assign, their behavior is defined by the overflow property.

Value

The property takes a CSS length (px, pt, em, etc.), a percentage, or the keyword auto. Negative length values are illegal.

Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.

The special auto value allows the browser to calculate the content height automatically, based on other factors. For absolutely positioned elements, for example, the content height may be calculated on the basis of the top and bottom property values, or the top and bottom margins, borders, and padding applied to the element. If no hard constraints are imposed by other properties, the element is allowed to assume its “natural” content height, on the basis of the height of the content it contains.

Compatibility

Internet Explorer for Windows versions up to and including 5.5 (and up to and including version 7 in quirks mode) incorrectly include padding, borders, and margins in the content height calculation. This is known as the box model bug, or the IE5 box model—see The CSS Box Model.

Internet Explorer for Windows versions up to and including 6 (and up to and including version 7 in quirks mode) incorrectly treat height as min-height, extending the content height of a block if its content can’t fit within the specified height. The result is that other elements in the flow will be moved around to account for this extra height, which can result in a broken layout or, at the least, a different layout from the one that was expected.

The correct behavior would simply allow the content to overflow without affecting the height at all, as the default setting for overflow is visible. This would mean that the overflowing content would be ignored for the purposes of the layout, and might therefore overlap other elements on the page.

In standards mode, Internet Explorer version 7 treats height correctly and in accordance with the CSS specifications.

Internet Explorer for Windows versions up to and including 6 don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together. They will use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.