path: root/files/es/web/css/height/index.html

---
title: height
slug: Web/CSS/height
tags:
  - Propiedad CSS
  - Referencia
translation_of: Web/CSS/height
---
<div>{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad CSS <strong><code>height</code></strong> especifica la altura del area de contenido de un elemento. El <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p>

<p>Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush:css">/* Valores clave */
height: auto;

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

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

/* Valores globales */
height: inherit;
height: initial;
height: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Ver {{cssxref("&lt;length&gt;")}} para unidades disponibles.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Especificado con el tipo {{cssxref("&lt;percentage&gt;")}} como porcentaje de la altura del bloque contenedor</dd>
 <dt><code>border-box </code>{{experimental_inline}}</dt>
 <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente es aplicado a los límites del borde del elemento.</dd>
 <dt><code>content-box</code> {{experimental_inline}}</dt>
 <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente será aplicado a los límites de contenido del elemento.</dd>
 <dt><code>auto</code></dt>
 <dd>El navegador calculará y seleccionará la altura para el elemento especificado.</dd>
 <dt>fill {{experimental_inline}}</dt>
 <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd>
 <dt><code>max-content</code> {{experimental_inline}}</dt>
 <dd>La altura preferida intrínseca.</dd>
 <dt><code>min-content</code> {{experimental_inline}}</dt>
 <dd>La altura mínima intrínseca.</dd>
 <dt><code>available</code> {{experimental_inline}}</dt>
 <dd>La altura del bloque contenedor menos su margen vertical, borde y padding.</dd>
 <dt><code>fit-content</code> {{experimental_inline}}</dt>
 <dd>El mayor entre:
 <ul>
  <li>la altura mínima intrínseca</li>
  <li>la menor entre la altura prefereida intrínseca y la altura disponible</li>
 </ul>
 </dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

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

<h2 id="Ejemplo">Ejemplo</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('Example')}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Incluye <code>height</code> como propiedad que puede ser animada.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Añade soporte para valores {{cssxref("&lt;length&gt;")}} y especifica a qué elementos es aplicable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
   <td>{{Spec2('CSS3 Sizing')}}</td>
   <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
   <td>{{CompatChrome(46.0)}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(46.0)}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatChrome(46.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
</ul>