max-height

Article
10/10/2017

Sets the maximum height for an element.

Syntax

{ max-height: sMaxHeight }

Possible values

sMaxHeight

Variant that specifies the maximum height for an element:

length

Floating-point number followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).

For more information about the supported length units, see Length units reference.

percentage

Integer followed by a percent sign (%) that specifies a percentage of the containing block height to use as the maximum height of the element. If the height of the containing block is not explicitly set, the element has no maximum height and the max-height property is interpreted as 0%. For more information about containing blocks and how their heights are computed, see the Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) Ee371262.xtlink_newWindow(en-us,Expression.40).png specification.

The property has no default value. The cascading style sheet property is not inherited.

Remarks

The min-height and max-height attributes apply to floating and absolutely positioned block level elements and inline-block elements, and also some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img element or a textarea element.)

This property is enabled only under the strict !DOCTYPE.

Example

The following example shows how the min-height and max-height attributes affect the layout of a DIV element:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN">
<html>
<head><style>
.height {
    float:left;
    width:300px;
    background:#fff;
    margin:0 1em;
}
#example1 {min-height:200px;}
#example2 {max-height:100px;}
.content {
    border :1px solid #c00;
    padding:5px;
}
</style>
</head>
<body>
<div class="height" id="example1">
<div class="content">
    <h2>{min-height:200px }</h2>
    <p>The height of this div is always at least 200px.<br/><br/>
        The content does not fill the entire div.</p>
</div>
</div>

<div class="height" id="example2">
<div class="content">
    <h2>{max-height:100px}</h2>
    <p>This div will not grow more than 100px in height.<br/><br/>
        The content that does not fit in the div continues beyond it.</p>
</div>
</div>
</body>
</html>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) Ee371262.xtlink_newWindow(en-us,Expression.40).png .

Applies to

a, abbr, acronym, b, bdo, big, blockquote, body, button, caption, center, cite, code, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frameset, frame, hn, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, s, span, sub, table, td, th, tt, u, ul, var, xmp