Propiedad height de CSS
La propiedad height de CSS establece la altura del elemento. Prueba ejemplos con cada valor de esta propiedad.
La propiedad height de CSS establece la altura del content box de un elemento — el área donde viven el texto y los elementos hijos. Por defecto (height: auto), el navegador ajusta el tamaño de un elemento de bloque para que sea lo suficientemente alto como para contener su contenido, por lo que solo se establece height cuando se necesita un tamaño fijo o relativo en su lugar.
Por defecto, el valor que se asigna se aplica únicamente al content box — no incluye el padding, los bordes ni los márgenes. Un <div> con height: 100px; padding: 20px tiene por tanto 140px de alto en pantalla. Para que height incluya el padding y el borde, establece box-sizing: border-box — una práctica recomendada casi universal. La propiedad complementaria es width, que funciona de la misma manera para el eje horizontal.
Puedes expresar la altura como una longitud (px, em, rem, vh, cm, …) o como un porcentaje. El valor predeterminado es auto.
Si también se establecen las propiedades min-height y max-height, estas restringen height: el elemento nunca se reduce por debajo de min-height ni crece más allá de max-height.
Cuando height es un valor numérico y el contenido es más alto que esa altura, el contenido desborda su caja. La propiedad overflow controla lo que ocurre entonces: recortarlo, ocultarlo o añadir una barra de desplazamiento.
No se aceptan valores negativos.
El problema con los porcentajes. Un height en porcentaje se resuelve respecto a la altura del elemento padre — y solo si ese padre tiene una altura explícita. Si la altura del padre es auto (el valor predeterminado), un height: 50% de un hijo no tiene una referencia fija y se trata como auto, por lo que parece no tener efecto. Para que las alturas en porcentaje se propaguen hasta la página, asigna una altura explícita a los ancestros — comúnmente html, body { height: 100%; } — o usa la unidad de viewport vh (height: 50vh es siempre la mitad del viewport, independientemente del padre).
| Valor inicial | auto |
|---|---|
| Se aplica a | todos los elementos |
| Heredable | No. |
| Animable | Sí. La altura es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.height = "400px"; |
Sintaxis
Sintaxis de la propiedad height de CSS
height: auto | length | initial | inherit;Ejemplo de la propiedad height:
Ejemplo de la propiedad height de CSS con valor de longitud
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div>The height of this div element is set to "60px".</div>
<p>The height of this paragraph is set to "30px".</p>
</body>
</html>Resultado
Ejemplo de la propiedad height con la etiqueta HTML <image>:
Ejemplo de la propiedad height de CSS con valores auto y de longitud
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<p>Here the height is set to "auto"</p>
<img class="height-normal" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<br />
<hr />
<p>The height for this image is defined as "100px".</p>
<img class="height-big" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Ejemplo de la propiedad height con el valor "length":
Ejemplo de la propiedad height de CSS usando el valor vh
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="container">
<p>Here the height is specified as "50vh".</p>
</div>
</body>
</html>Ejemplo de la propiedad height con todos los valores:
Ejemplo de la propiedad height de CSS con valores auto, vh, % y px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>Palabras clave de dimensionamiento intrínseco
Más allá de las longitudes fijas y los porcentajes, el CSS moderno añade palabras clave que dimensionan un elemento según su contenido en lugar de con un número:
.box {
height: max-content; /* tall enough for the content, never wrapping it shorter */
}
.box {
height: min-content; /* the smallest height the content can take */
}
.box {
height: fit-content; /* like auto, but clamps to fit-content(<length>) when given */
}Son más útiles en diseños con Flexbox y CSS Grid, donde se desea que una pista o elemento se ajuste a su contenido en lugar de estirarse. Son ampliamente compatibles con los navegadores actuales.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Con este valor, el navegador calcula la altura original de la imagen o la caja. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Define la altura con px, cm, em, rem, vh, etc. | Pruébalo » |
| % | Define la altura con porcentaje. | |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |