min-height (CSS property)

Spec
Inherited Initial Version
No 0 CSS2
Browser support (more…)
IE7+ FF1+ SA2+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

min-height: { length | percentage | inherit } ;

Description

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

An element to which min-height is applied will never be smaller than the minimum height specified, but will be allowed to grow normally if the content exceeds the minimum height set.

min-height is usually used to ensure that an element has at least a minimum height even if no content is present; it’s also commonly used in conjunction with max-height to produce a height range for the element concerned.

Note: Combining min-height and height

Note that min-height and height shouldn’t be applied to the same element using the same unit, as this will cause one to override the other. If, for example, the height is set as 150px, and the min-height is set as 60px, the actual height of the element is 150px, and the min-height declaration becomes redundant:

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

In the above example, the height of the element will be fixed at 150px. However, it’s acceptable to set min-height and height when the values are different units:

#example {
  min-height: 3em;
  height: 138px;
}

Here, the min-height declaration is based on em, which means that at some stage (due to text resizing) the em height may be larger than the 138px height we’ve set. In cases such as this, the element will be allowed to expand further than the 138px height, thus accommodating the resizing of the em-based text.

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

Example

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

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

Value

The property takes a CSS length (px, pt, em, etc.) or a percentage. 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 zero.

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 Full Full Full Full Full Full Partial Full Full Full Full Full Full Full

Although the support table above indicates that Internet Explorer 6 provides no support for min-height, note that in quirks mode only it will support min-height on td, th, and tr elements in fixed-layout tables—see table-layout. This behavior is contrary to the CSS2.1 specifications, and is corrected in standards mode, which provides no support for this property.

Internet Explorer versions up to and including 6 treat the height property in much the same way as min-height, and will always expand a container to encompass the content unless overflow has been set to something other than visible.

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

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

User-contributed notes

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

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

The reference should be amended as it says buggy.

Related Products