Altura automática
El contenido define naturalmente la altura del bloque.
Height
Height reúne utilidades para controlar altura estructural, ocupar viewport o dejar que el contenido determine la dimensión vertical.
Qué resuelve height
El módulo height controla la dimensión vertical de un bloque cuando el contenido por sí solo no es suficiente para definir su altura esperada.
Es útil para hero sections, bloques que deben ocupar toda la pantalla, layouts que necesitan crecer al 100% del contenedor padre o elementos que deben conservar altura automática.
Referencia del archivo
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.min-h-full {
min-height: 100%;
}
.h-screen {
height: 100vh;
}
.min-h-screen {
min-height: 100vh;
}Helpers disponibles
Altura completa
Hace que el elemento intente ocupar el 100% de la altura del contenedor padre.
Altura mínima completa
Garantiza al menos el 100% de la altura disponible sin fijarla totalmente.
Viewport exacto
Hace que el bloque mida exactamente el alto del viewport.
Viewport mínimo
El bloque ocupa al menos el viewport, pero puede crecer con el contenido.
Ejemplos de uso
<section class="min-h-screen align items-center">
<div class="container container-lg">
...
</div>
</section><div class="h-full">
...
</div><div class="h-auto">
...
</div><main class="min-h-screen">
...
</main>Cuándo usar height helpers
Sí usar
- En hero sections o bloques de pantalla completa.
- Cuando un contenedor debe llenar al padre.
- Para layouts que necesitan altura mínima estable.
- Cuando el viewport forma parte de la intención visual del bloque.
No usar
- Cuando la altura natural del contenido ya funciona correctamente.
- Para forzar bloques a alturas arbitrarias sin necesidad estructural.
- Cuando el problema real es de padding, align o layout.
- En componentes editoriales que deben crecer libremente.
h-screen vs min-h-screen
Alto exacto
El bloque mide exactamente el alto del viewport. Es útil cuando se necesita una composición estricta de pantalla completa.
Alto flexible
El bloque ocupa al menos el viewport, pero puede crecer si el contenido lo necesita. Es más seguro para contenido variable.
Qué sí y qué no va en height
Qué sí debe contener
- Helpers de altura estructural.
- Helpers relacionados con altura del viewport.
- Alturas completas y mínimas dentro de un contenedor.
Qué no debe contener
- Width helpers.
- Align helpers.
- Spacing.
- Decoración visual del proyecto.
- Alturas arbitrarias que no respondan a una lógica del sistema.
Siguiente paso
Continúa con radius para revisar el sistema de esquinas redondeadas.