mozilla

Revision 25756 of max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 25756
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 115 words added; page display name changed to 'max-height'

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

<length>
Specifies a fixed minimum or maximum computed height.
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' ('max-height').
none
(Only on 'max-height') No limit on the height of the box.
  • 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>
<dl><dt>&lt;length&gt;</dt><dd>Specifies a fixed minimum or maximum computed height. </dd><dt>&lt;percentage&gt;</dt><dd>Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's <a class=" external" href="http://www.w3.org/TR/CSS21/visuren.html#containing-block">containing block</a>. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' ('max-height'). </dd><dt>none</dt><dd>(Only on 'max-height') No limit on the height of the box. </dd></dl>
<ul> <li><strong>none</strong> : the {{ Cssxref("height") }} has no maximum value</li> <li><strong>length</strong> : can be in px, cm, in</li> <li><strong>percentage</strong> : % 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