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.
Mediavisual
Valor calculadoa percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderel orden único no-ambigüo definido por la gramática formal

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 
Si está presente, el valor <length> o <percentage> precedente es aplicado a los límites del borde del elemento.
content-box 
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
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content 
La altura preferida intrínseca.
min-content 
La altura mínima intrínseca.
available 
La altura del bloque contenedor menos su margen vertical, borde y padding.
fit-content 
El mayor entre:
  • la altura mínima intrínseca
  • la menor entre la altura prefereida intrínseca y la altura disponible

Sintaxis formal

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

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.		 Working Draft 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 Intrinsic & Extrinsic 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!

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