max-height

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

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

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

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 7.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<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 class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to:</dfn> block level and replaced elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Percentages:</dfn> yes, see below</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> the percentage as specified or the absolute length or <code>none</code></li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
max-height:  &lt;length&gt; | &lt;percentage&gt; | none | inherit
</pre>
<h3 id="Values" 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>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
table { max-height: 75%; }

form { max-height: none; }
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>{{ Cssxref("max-height") }} overrides height, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-height") }}.</p>
<h3 id="Specifications" 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>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>7.0</td>
        <td>7.0</td>
        <td>1.0</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>1.0</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<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>
Revert to this revision