| Inherited | Initial | Version |
|---|---|---|
| No | 0 |
CSS2 |
| IE7+ | FF1+ | SA2+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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 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
- 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.
