【CSS】Cómo establecer la altura de un elemento al 100%｜Uso de h-100 y h-50
Esta guía explica cómo establecer la altura de un elemento al 100% utilizando las clases CSS h-100 y h-50. Al hacerlo, la altura del elemento se ajustará a la altura del contenedor principal.
🔹 Ejemplo de código
<div class="container">
<div class="h-100">Este elemento tendrá una altura del 100%.</div>
<div class="h-50">Este elemento tendrá una altura del 50%.</div>
</div>
<style>
.container {
height: 300px;
}
.h-100 {
height: 100%;
}
.h-50 {
height: 50%;
}
</style>
💻 Código completo funcional (Copia y pega para hacerlo funcionar)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Elementos con altura del 100% y 50%</title>
<style>
.container {
height: 300px;
border: 2px dashed #000;
}
.h-100 {
height: 100%;
background-color: #90EE90;
padding: 1rem;
}
.h-50 {
height: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="h-100">Este elemento tendrá una altura del 100%.</div>
<div class="h-50">Este elemento tendrá una altura del 50%.</div>
</div>
</body>
</html>
🧩 Aplicación y uso
height: 100%; es una de las formas más fundamentales de ajustar la altura de un elemento para que coincida con la altura de su contenedor principal. Es particularmente útil cuando se desea que un elemento ocupe toda la altura del contenedor principal.
📱 Diseño adaptable
h-100 es muy eficaz en diseños adaptables. Al usar h-100, puedes ajustar la altura de los elementos de forma que se adapten a diferentes tamaños de pantalla, como en dispositivos móviles.
Al usar esta clase, puedes asegurarte de que la altura del elemento se ajuste al contenedor principal, lo que hace que los diseños verticales sean más consistentes.