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 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. |
Valor calculado | a percentage or auto or the absolute length |
Animation type | a 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
Experimental- Si está presente, el valor
<length>
o<percentage>
precedente es aplicado a los límites del borde del elemento. content-box
Experimental- 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 Experimental
- Use el tamaño
fill-available
para elementos inline o block, según sea más apropiado para el modo de escritura. max-content
Experimental- La altura preferida intrínseca.
min-content
Experimental- La altura mínima intrínseca.
available
Experimental- La altura del bloque contenedor menos su margen vertical, borde y padding.
fit-content
Experimental- 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 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
BCD tables only load in the browser