Revision 890519 of height

<div>{{CSSRef()}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p>The <code>height</code> CSS property specifies the height of the content area of an element. The <a href="/en-US/docs/CSS/box_model#content" title="CSS/Box_model#content">content area</a> is <em>inside</em> the padding, border, and margin of the element.</p>

<p>The {{Cssxref("min-height")}} and {{Cssxref("max-height")}} properties override {{Cssxref("height")}}.</p>

<p>{{cssbox("height")}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush:css">height: auto;

/* &lt;length&gt; values */
height: 120px;
height: 10em;

/* &lt;percentage&gt; value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;
</pre>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt><code style="font-size: 14px;">&lt;length&gt;</code></dt>
 <dd>See {{ Xref_csslength }} for possible units.</dd>
 <dt><code style="font-size: 14px;">&lt;percentage&gt;</code></dt>
 <dd>Specified as a {{ Xref_csspercentage }} of containing block's <span style="line-height: 21px;">height</span>.</dd>
 <dt><code style="font-size: 14px;">border-box </code>{{ experimental_inline }}</dt>
 <dd>If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's border box.</dd>
 <dt><code style="font-size: 14px;">content-box</code> {{ experimental_inline }}</dt>
 <dd>If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's content box.</dd>
 <dt><code style="font-size: 14px;">auto</code></dt>
 <dd>The browser will calculate and select a height for the specified element.</dd>
 <dt><code style="font-size: 14px;">max-content</code> {{ experimental_inline }}</dt>
 <dd>The intrinsic preferred <span style="line-height: 21px;">height</span>.</dd>
 <dt><code style="font-size: 14px;">min-content</code> {{ experimental_inline }}</dt>
 <dd>The intrinsic minimum <span style="line-height: 21px;">height</span>.</dd>
 <dt><code style="font-size: 14px;">available</code> {{ experimental_inline }}</dt>
 <dd>The containing block height minus vertical margin, border and padding.</dd>
 <dt><code style="font-size: 14px;">fit-content</code> {{ experimental_inline }}</dt>
 <dd>The larger of:
 <ul>
  <li>the intrinsic minimum height</li>
  <li>the smaller of the intrinsic preferred height and the available height</li>
 </ul>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax2}}</pre>

<h2 id="Live_sample" name="Live_sample">Example</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="red"&gt;
  &lt;span&gt;I'm 50 pixels tall.&lt;/span&gt;
&lt;/div&gt;
&lt;div id="green"&gt;
  &lt;span&gt;I'm 25 pixels tall.&lt;/span&gt;
&lt;/div&gt;
&lt;div id="parent"&gt;
  &lt;div id="child"&gt;
    &lt;span&gt;I'm half the height of my parent.&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
</pre>

<p>{{ EmbedLiveSample('Live_sample') }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Lists <code>height</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adds support for the {{xref_csslength()}} values and precises on which element it applies to.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<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>4.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>

<ul>
 <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">box model</a>, {{Cssxref("width")}}, {{Cssxref("box-sizing")}}, {{Cssxref("min-height")}}, {{Cssxref("max-height")}}</li>
</ul>