Propiedad height de CSS
La propiedad height se utiliza para establecer la altura de un elemento. Esta propiedad no incluye padding, bordes ni márgenes. La propiedad height puede especificarse en "px", "cm", "vh" o en porcentajes. El valor predeterminado es "auto".
Si se utilizan las propiedades min-height y max-height, estas restringen la propiedad height.
Si height se establece en uno de los valores numéricos como rem, px o %, y el contenido no cabe dentro de la altura especificada, esto provocará un desbordamiento. La propiedad CSS overflow especifica cómo el contenedor gestionará el desbordamiento.
INFO
Los valores negativos no están permitidos.
| Valor inicial | auto |
|---|---|
| Se aplica a | todos los elementos |
| Heredado | 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 length
<!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 length
<!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://www.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://www.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 al usar 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>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Cuando usamos este valor, el navegador calcula la altura original de la imagen o caja. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Define la altura en px, cm, em, rem, vh, etc. | Pruébalo » |
| % | Define la altura en porcentaje. | |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son las configuraciones posibles para la propiedad height en CSS?