Footer siempre abajo: Sticky Footer con CSS Flexbox

5 nov 2025

Antes de empezar

Vamos a ver cómo crear un sticky footer que siempre se mantenga al final de la página.

Pulsa el botón que aparece debajo, RUN PROJECT

Un sticky footer es una técnica de CSS que mantiene el footer pegado al final de la ventana cuando el contenido es corto, pero permite que el contenido lo “empuje” hacia abajo cuando hay suficiente texto.

Sin esta técnica, el footer queda “flotando” en el medio de la página cuando hay poco contenido, creando un espacio vacío antiestético.

Un footer que no está correctamente posicionado puede arruinar por completo la experiencia del usuario:

Problemas comunes:

Footer flotando en el medio de la página
Espacios vacíos incómodos
Diseño que se ve “roto” o inacabado
Mala percepción de profesionalidad

Beneficios del sticky footer:

Mantiene el diseño consistente
Mejor experiencia de usuario
Aspecto más profesional y pulido
El contenido se distribuye correctamente

La estructura HTML básica

<!-- Estructura simple pero efectiva -->
<div class="container">
  <header class="header">
    <h1>Mi Header</h1>
  </header>
  
  <main class="main">
    <!-- Aquí va todo tu contenido principal -->
    <h1>Contenido Principal</h1>
    <p>Este contenido puede ser corto o largo...</p>
  </main>
  
  <footer class="footer">
    <p>© 2025 Mi Sitio Web</p>
  </footer>
</div>

La clave está en tener un contenedor padre que envuelva todo el layout y estructurar correctamente los elementos hijos.

El CSS que hace la magia: Flexbox

1. El contenedor principal:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Altura mínima = viewport completo por device */
}

2. El contenido principal que crece:

.main {
  flex-grow: 1; /* Esta es la clave: crece para ocupar el espacio disponible */
  padding: 25px;
}

3. El footer (sin propiedades especiales):

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--footer-bg);
}

Conceptos clave explicados

min-height: 100dvh

Asegura que el contenedor ocupe al menos toda la altura de la ventana
dvh es más moderno que vh y maneja mejor las barras de navegación móviles. Reconoce el device

flex-direction: column

Organiza los elementos verticalmente (header → main → footer)
Permite que funcione correctamente el flex-grow

flex-grow: 1

Esta es la propiedad estrella
Hace que el main crezca y ocupe todo el espacio disponible
Empuja automáticamente el footer hacia abajo

Alternativa con margin-top: auto

Si prefieres no usar flex-grow, puedes usar esta alternativa:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.footer {
  margin-top: auto; /* Empuja el footer al final */
  /* resto de estilos... */
}

Ambas técnicas funcionan, pero flex-grow es más semánticamente correcta para este caso.

Código completo funcionando