max-height (CSS property)

Spec
Inherited Initial Version
No none CSS2
Browser support (more…)
IE5.5+ FF1+ SA2+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

max-height: { length | percentage | none | inherit } ;

Description

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

An element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. There is an exception to this rule, however: if min-height is specified with a value that’s greater than that of max-height, the container’s height will be the largest value, which, in this case, means that the min-height value will in fact be the one that’s applied.

max-height is usually used in conjunction with min-height to produce a height range for the element concerned.

Note: Combining max-height and height

Note that max-height and height should not be applied to the same element using the same unit, as one will override the other. For example, if the height is set to 150px and the max-height set to 60px, the actual height of the element is 60px, and the height declaration becomes redundant:

#example {
  max-height: 60px;
  height: 150px;
}

In the above example, the height of the element will be fixed at 60px.

However, it is acceptable (although it may not be entirely useful) to set max-height and height when the values are different units:

#example {
  max-height: 10em;
  height: 138px;
}

The height in the above example will be whichever is the smaller of the values.

Since the max-height declaration is based on em units, at some stage (due to text resizing) the em height may be smaller than the 138px height we’ve set. In cases such as these, the element will be allowed to shrink from the 138px height, thus keeping track with the em-based text. See the entry on min-height for the reverse of this scenario.

If the contents of a block require more vertical space than is afforded by the limits that have been set, their behavior is defined by the overflow property.

Example

This style rule assigns a maximum height of 100 pixels to paragraphs within the element with ID "example":

#example p {
  max-height: 100px;
}

Value

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword none. Negative length values are illegal.

Percentage values refer to the height of the containing block. If the height of the containing block is not specified explicitly (that is, it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Full Buggy Full Full Full Full Full Partial Full Full Full Full Full Full Full

Safari’s support for this property, when applied to positioned elements, is limited to versions 2.0.2 or above.

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

Internet Explorer for Windows Version 8 treats max-height as height when the element it is applies to has a property value of overflow:scroll. A similar bug is also evident when horizontal content overflows the container when overflow has a value of either auto or scroll and once again max-height is treated as height (see James Hopkins for test cases).

User-contributed notes

ID:
#2
Contributed:
by Paul O'B
Date:
Thu, 15 Jul 2010 20:25:16 GMT

IE6 and under have no support for min-width/max-width min-height/max-height.

The reference should be amended.

Related Products