Revision 25755 of max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 25755
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The max-height 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> 

Values

  • none : the {{ Cssxref("height") }} has no maximum value
  • length : can be in px, cm, in
  • percentage : % specified as a percentage of containing block's height

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("-moz-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> 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; 
</pre>
<h3 name="Values"> Values </h3>
<ul><li> <b>none</b> : the {{ Cssxref("height") }} has no maximum value
</li><li> <b>length</b> : can be in px, cm, in </li><li> <b>percentage</b> : % specified as a percentage of containing block's height </li></ul>
<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">box model</a>, {{ Cssxref("max-width") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}
</p>{{ languages( { "fr": "fr/CSS/max-height", "es": "es/CSS/max-height" } ) }}
Revert to this revision