height — Frontend Classroom

La propiedad height controla el alto de un elemento HTML, y es donde muchos principiantes descubren que el eje vertical del CSS se comporta de forma distinta al horizontal. Mientras width en un elemento en bloque por defecto ocupa todo el ancho disponible del contenedor, el comportamiento por defecto de height es exactamente el opuesto: el alto por defecto lo determina el contenido. Si no hay contenido, el elemento tiene alto cero.

Esta diferencia tiene sentido desde la perspectiva del flujo: el eje horizontal en CSS tiene un límite definido (el ancho del viewport o el contenedor), pero el eje vertical es potencialmente infinito — el scroll permite que una página tenga cualquier altura. Por eso CSS no asume ningún alto por defecto: el alto “natural” de un elemento es exactamente el que necesita para mostrar su contenido.

Declarar height fijo tiene una consecuencia importante: si el contenido crece más allá del alto declarado, desborda. Un <div style="height: 100px"> con tres párrafos adentro tiene un problema — el contenido se sale de la caja a menos que se declare overflow. Por esta razón, en interfaces reales se prefiere min-height sobre height fijo: el elemento tiene al menos el alto declarado, pero puede crecer si el contenido lo requiere.

Cómo funciona

height establece el alto del área de contenido del elemento (con content-box) o el alto de la caja completa hasta el border externo (con border-box). El margin nunca entra en este cálculo.

A diferencia de width, donde width: 100% hace que el elemento tome el ancho del contenedor, height: 100% tiene un requisito: el contenedor padre debe tener un alto definido. Si el padre tiene height: auto (el default), el 100% del hijo no tiene referencia y computa a 0. Para que height: 100% funcione en cadena hasta llenar el viewport, cada ancestro hasta <html> y <body> debe tener height: 100% o height: 100vh.

Sintaxis

.caja {
  height: auto;       /* alto determinado por el contenido (default) */
  height: 200px;      /* alto fijo en píxeles */
  height: 50%;        /* porcentaje del alto del contenedor padre */
  height: 100vh;      /* 100% del alto del viewport */
  height: 100dvh;     /* 100% del dynamic viewport height (móvil) */
}

Valores

`auto` (valor por defecto)

El alto lo determina el contenido. El elemento crece tanto como necesite para mostrar todo lo que contiene. Es el comportamiento natural y el más robusto para interfaces variables.

Longitudes fijas (`px`, `em`, `rem`)

Establecen un alto fijo. Útil para elementos con altura exacta conocida (imágenes con object-fit, componentes de UI de tamaño fijo). El riesgo es que si el contenido crece (el usuario tiene un tamaño de fuente grande, el texto se traduce a un idioma más largo, hay más datos), el contenido desborda.

/* Para elementos donde el tamaño es conocido y fijo */
.avatar { width: 48px; height: 48px; }
.thumbnail { width: 200px; height: 150px; object-fit: cover; }

Porcentajes (`%`)

Relativos al alto del elemento contenedor, que debe tener un alto explícito para que el porcentaje funcione. A diferencia de los porcentajes en width (que siempre tienen referencia porque el ancho del contenedor siempre existe), los porcentajes en height fallan silenciosamente cuando el contenedor no tiene alto declarado.

/* Esto funciona: el padre tiene height explícito */
.contenedor { height: 400px; }
.hijo       { height: 100%; }   /* → 400px */

/* Esto NO funciona: el padre tiene height: auto */
.contenedor { }                 /* height: auto (default) */
.hijo       { height: 100%; }   /* → 0px (sin referencia) */

Unidades de viewport (`vh`, `dvh`, `svh`)

vh — 1% del alto del viewport. 100vh llena la pantalla completa. En móvil, la barra de URL del navegador puede tapar parte del contenido porque vh no la descuenta.
dvh (dynamic viewport height) — se adapta cuando la barra de URL del navegador móvil aparece o desaparece. Es la unidad recomendada para “hero sections” a pantalla completa en móvil.
svh (small viewport height) — siempre mide el viewport más pequeño posible (con barra de URL visible). Más predecible que dvh para algunos casos.

/* Hero section que llena la pantalla */
.hero {
  height: 100dvh;    /* más seguro en móvil que 100vh */
}

`min-height` y `max-height`

Estas propiedades son análogas a min-width y max-width pero en el eje vertical.

`min-height`

Establece el alto mínimo: el elemento nunca es más bajo que este valor, pero puede crecer si el contenido lo requiere. Es la alternativa robusta a height fijo para la mayoría de los casos en interfaces reales.

/* Tarjeta que tiene al menos 200px pero crece si el contenido es más largo */
.tarjeta {
  min-height: 200px;
  padding: 24px;
}

El patrón “al menos X, pero puede crecer” es el más usado en interfaces donde el contenido es variable (datos de API, texto de usuario, traducciones). min-height: 0 explícito es útil en flexbox/grid para permitir que un ítem encoja por debajo del mínimo natural de su contenido.

`max-height`

Establece el alto máximo: el elemento no crece más allá de este valor. Cuando el contenido excede el max-height, se aplica el overflow del elemento (por defecto visible, pero suele combinarse con overflow: auto o hidden).

/* Dropdown que no supera la mitad de la pantalla */
.dropdown-lista {
  max-height: 50vh;
  overflow-y: auto;   /* scroll cuando hay más contenido */
}

Ejemplo realista

/* Layout de pantalla completa con header fijo y contenido scrollable */
.layout {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 64px;         /* alto fijo y conocido */
  flex-shrink: 0;
}

.contenido-principal {
  flex: 1;              /* toma el resto del alto disponible */
  overflow-y: auto;     /* scroll si el contenido no entra */
  padding: 24px;
}

/* Tarjeta de producto con mínimo visual */
.tarjeta-producto {
  min-height: 300px;    /* siempre visible aunque los datos estén cargando */
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Dropdown con límite */
.suggestions {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

Cuándo usarlo

Situación	Solución recomendada
Elemento que crece con su contenido (default)	No declarar `height` — el default `auto` es correcto
Elemento de tamaño fijo exacto (avatar, thumbnail)	`height: NNpx`
Elemento que debe tener al menos X de alto	`min-height: NNpx`
Elemento que nunca debe superar X de alto	`max-height: NNpx` + `overflow-y: auto`
Hero section a pantalla completa	`height: 100dvh`
Elemento que llena el espacio restante en flex/grid	`flex: 1` o `align-self: stretch` (no `height: 100%`)

Notas, gotchas e interacción

height: 100% requiere un alto definido en el padre. Si el padre tiene height: auto, el hijo con height: 100% resulta en 0. Para llenar el viewport, usa height: 100vh directamente o configura height: 100% en toda la cadena de ancestros hasta <html>.
Preferí min-height sobre height en interfaces con contenido variable. height fijo con contenido que puede crecer termina en desbordamiento o clipping. min-height es más resiliente: el contenido corto respeta el mínimo y el contenido largo simplemente agranda el elemento.
100vh en móvil puede ser problemático. Las barras del navegador móvil no descontaban de vh, causando que la pantalla “completa” quedara parcialmente tapada. Usá 100dvh para casos donde esto importa (hero sections, modales, fullscreen).
Interacción con box-sizing: igual que width, height con content-box mide solo el contenido; con border-box incluye padding y border. Cicatriz del sandbox de este sitio: el sandbox inyecta *{box-sizing:border-box} (docs/CICATRICES.md A.1.7).
height no aplica a elementos inline puro. Como width, height es ignorado en <span>, <a>, <em> y otros inline no reemplazados. Hay que cambiar el display.
min-height gana sobre height y max-height. Si min-height: 200px y max-height: 150px, el elemento mide 200px.

Vigente / legacy

No hay formas legacy para height. Las unidades de viewport dvh y svh son relativamente recientes (ampliamente soportadas desde 2023) y mejoran vh en contextos móviles. Las propiedades lógicas block-size (equivalente a height en escritura horizontal) y sus variantes min-block-size/max-block-size son alternativas modernas para layouts internacionales.

Cómo funciona

Sintaxis

Valores

auto (valor por defecto)

Longitudes fijas (px, em, rem)

Porcentajes (%)

Unidades de viewport (vh, dvh, svh)

min-height y max-height

min-height

max-height