max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 25760
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Migrated data to new compatibility table.; 66 words added

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)

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support   1.0 (1.0) 7.0 4.0 2.0.2 (416)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td> </td> <td>1.0 (1.0)</td> <td>7.0</td> <td>4.0</td> <td>2.0.2 (416)</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<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