height

Resumen

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

Las propiedades min-height y max-height sobreescriben el valor de height.

Valor inicialauto
Applies toelementos de bloque o remplazados
Heredableno
PercentagesThe 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 value computes to auto. A percentage height on the root element is relative to the initial containing block.
Valor calculadoa percentage or auto or the absolute length
Animation typea length, percentage or calc();

Sintaxis

/* Valores clave */
height: auto;

/* Valores <length> */
height: 120px;
height: 10em;

/* Valores <percentage> */
height: 75%;

/* Valores globales */
height: inherit;
height: initial;
height: unset;

Valores

<length>
Ver <length> para unidades disponibles.
<percentage>
Especificado con el tipo <percentage> como porcentaje de la altura del bloque contenedor
border-box  This is an experimental API that should not be used in production code.
Si está presente, el valor <length> o <percentage> precedente es aplicado a los límites del borde del elemento.
content-box  This is an experimental API that should not be used in production code.
Si está presente, el valor <length> o <percentage> precedente será aplicado a los límites de contenido del elemento.
auto
El navegador calculará y seleccionará la altura para el elemento especificado.
fill This is an experimental API that should not be used in production code.
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content  This is an experimental API that should not be used in production code.
La altura preferida intrínseca.
min-content  This is an experimental API that should not be used in production code.
La altura mínima intrínseca.
available  This is an experimental API that should not be used in production code.
La altura del bloque contenedor menos su margen vertical, borde y padding.
fit-content  This is an experimental API that should not be used in production code.
El mayor entre:
  • la altura mínima intrínseca
  • la menor entre la altura prefereida intrínseca y la altura disponible

Sintaxis formal

auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)
where 
<length-percentage> = <length> | (en-US) <percentage>

Ejemplo

HTML

<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>

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%;
}

Especificaciones

Especificación Estado Comentarios
CSS Basic Box Model
La definición de 'height' en esta especificación.		 Candidate Recommendation Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
CSS Transitions
La definición de 'height' en esta especificación.		 Working Draft Incluye height como propiedad que puede ser animada.
CSS Level 2 (Revision 1)
La definición de 'height' en esta especificación.		 Recommendation Añade soporte para valores <length> y especifica a qué elementos es aplicable.
CSS Level 1
La definición de 'height' en esta especificación.		 Recommendation Definición inicial
CSS Box Sizing Module Level 3
La definición de 'width' en esta especificación.		 Working Draft Añade nuevas palabras clave de tamaño para width y height

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 1.0 (1.7 o anterior) 4.0 7.0 1.0
fill, fit-content, min-content, max-content 46.0        
Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0 (Yes)
fill, fit-content, min-content, max-content ? 46.0         46.0

Véase también