B.67. max-height, min-height

Instead of setting a fixed height, it is sometimes useful to set limits on the height of an element. These two properties let you set a maximum and/or minimum height. The height of the element is calculated normally, and then these limits are applied.

Remember to set the overflow property to hidden (or another appropriate value) if you set a max-height; otherwise, the content will overflow the specified height, even if the element does not.

Inherited: No

See also: Section B.45height, Section B.68max-width, Section B.68min-width

B.67.1. Value

A CSS length (px, pt, em, etc.), a percentage of the parent element's content area height, or (in the case of max-height only) none.

Initial value:

• max-height: none

• min-height: 0

B.67.2. Compatibility

CSS Version: 2

This property is fully supported on Netscape 6 and Mozilla browsers and Opera 7 or later only.

Internet Explorer 6 for Windows supports min-height only, and then only on td, th, and tr elements in fixed-layout tables (see Section B.106table-layout). The CSS2 specification specifically states that this property should not apply to table elements.

B.67.3. Example

This style rule specifies that the element with ID sidemenu should have a height between 200 and 1000 pixels, and should display a scrollbar if the content's height is greater than the maximum.

#sidemenu {
  min-height: 200px;
  max-height: 1000px;
  overflow: auto;
}