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 inicial | auto |
|---|---|
| Applies to | elementos de bloque o remplazados |
| Heredable | no |
| Percentages | The 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. |
| Media | visual |
| Valor calculado | a percentage or auto or the absolute length |
| Animation type | a length, percentage or calc(); |
| Canonical order | el 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-availablepara 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 |