Revision 25759 of max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 25759
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment +de / -"template."; 12 words added, 36 words removed; page display name reset to default

Revision Content

{{ CSSRef() }}

Summary

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the {{ Cssxref("height") }} property from becoming larger than the value specified for max-height.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: block level and replaced elements
  • {{ Xref_cssinherited() }}: no
  • Percentages:yes, see below
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length or none

Syntax

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

Values

<length>
A fixed maximum height. See {{ Xref_csslength() }} for possible units.
<percentage>
The {{ Xref_csspercentage() }} is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
none
No limit on the height of the box.

Examples

{{ CSSRefExampleLink("max-height") }} {{ Fixeg() }}

table { max-height: 75%; }

form { max-height: none; }

Notes

{{ Cssxref("max-height") }} overrides height, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-height") }}.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 7.0
Firefox 1.0 (1.0)
Opera 4.0
Safari (WebKit) 2.0.2 (416)

See also

box model, {{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}

{{ languages( { "de": "de/CSS/max-height", "fr": "fr/CSS/max-height", "es": "es/CSS/max-height" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> max-height </code>CSS property is used to set the maximum height of a given element. It prevents the used value of the {{ Cssxref("height") }} property from becoming larger than the value specified for<code> max-height</code>.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: block level and replaced elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages:yes, see below</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the percentage as specified or the absolute length or <code>none</code></li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">max-height:  &lt;length&gt; | &lt;percentage&gt; | none | inherit
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>&lt;length&gt;</dt> <dd>A fixed maximum height. See {{ Xref_csslength() }} for possible units.</dd> <dt>&lt;percentage&gt;</dt> <dd>The {{ Xref_csspercentage() }} is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as<code> none</code>.</dd> <dt>none</dt> <dd>No limit on the height of the box.</dd>
</dl>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("max-height") }} {{ Fixeg() }}</p>
<pre class="eval">table { max-height: 75%; }

form { max-height: none; }
</pre>
<h3 name="Notes">Notes</h3>
<p>{{ Cssxref("max-height") }} overrides height, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-height") }}.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights" title="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">CSS 2.1 #min-max-heights</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>7.0</strong></td> </tr> <tr> <td>Firefox</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>4.0</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>2.0.2</strong> (416)</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p><a href="/en/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</p>
<p>{{ languages( { "de": "de/CSS/max-height", "fr": "fr/CSS/max-height", "es": "es/CSS/max-height" } ) }}</p>
Revert to this revision