max-height Description:

The max-height property defines largest height that an element should have.

max-height in CSS Versions:

• CSS 2
• CSS 3

max-height Syntax:

max-height: <length> | <percentage> | none | inherit

• <length>
  The height is defined by a fixed measure.
• <percentage>
  The height is defined by a percentage of the containing block's height.
• none
  No limit on the height of the box.
• inherit
  The element should have the same max-height setting as the parent.

max-height Initial Value:

none

max-height Applies To:

All elements but non-replaced inline elements, table columns, and column groups.

max-height Inheritance:

This property is not inherited.

max-height Browser Support:

• Netscape 6, 7
• Mozilla 1
• Firefox 1
• Opera 6, 7, 8
• Safari 1

max-height media type:

• Visual

max-height Examples:

A paragraph with a max-height

<p style="max-height: 100px;"> This paragraph will not be more than 100 pixels high. </p>
max-height Special Notes:

• Internet Explorer 6 does not support this property.
• Make sure you define the overflow property if you want the contents to be clipped from an element that is larger than expected.
• Also remember that setting limits on the size of elements can cause accessibility problems.

More max-height Information

• min-height
• overflow

Return to the Style Library