max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 25757
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 27 words added, 98 words removed

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: refer to the height of the containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

Syntax

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

Values

<length>
A fixed maximum height. See {{ Xref_csslength() }} for possible units.
<percentage>
he {{ 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
(Only on 'max-height') 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 6
Firefox 1
Netscape 6
Opera 3.5
Safari ?

See also

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

{{ languages( { "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: refer to the height of the containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}:</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() }}<span class="lang lang-en"> </span> for possible units. </dd><dt>&lt;percentage&gt;</dt><dd>he {{ 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>(Only on 'max-height') 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/CSS2/visudet.html#min-max-heights">CSS 2.1</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>6</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari</td> <td>?</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( { "fr": "fr/CSS/max-height", "es": "es/CSS/max-height" } ) }}</p>
Revert to this revision