Pie de página siempre abajo con CSS, en tres líneas

En una página con poco contenido, el pie se queda flotando a media pantalla y deja un hueco feo debajo. Para tener el pie de página siempre abajo, con Grid se arregla en tres líneas: el pie queda al fondo de la ventana si sobra espacio, y debajo del contenido si no.

El código

<header class="cabecera">Cabecera</header>
<main>
  <p>Poco contenido. Sin la regla de Grid, el pie quedaría a media pantalla.</p>
</main>
<footer class="pie">Pie de página, siempre abajo</footer>

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: system-ui, sans-serif;
}
.cabecera, .pie { padding: 12px 16px; background: #0f1f33; color: white; }
main { padding: 16px; }

ResultadoÁbrelo en el editor →

Con la ventana de prueba de 600 píxeles de alto, el borde de abajo del pie coincide con el de la ventana en los tres navegadores.

Cómo funciona

min-height: 100dvh hace que el body mida al menos el alto de la ventana. Se usa dvh en vez de vh por los celulares (lo explicamos en las rarezas).
grid-template-rows: auto 1fr auto crea tres filas: la cabecera y el pie miden lo que su contenido, y el main se queda todo el espacio sobrante (1fr). Si el contenido es largo, el main crece y el pie baja con él.
Funciona porque el body tiene exactamente tres hijos. Si tu página tiene más (un aviso de cookies, un script no cuenta), añade filas o envuelve el contenido.

La versión con Flexbox

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

Hace lo mismo: el main crece con flex: 1 y empuja el pie. Tiene la ventaja de que da igual cuántos hijos tenga el body.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.