CSS

Componente Footer: layout responsive y sticky footer

Diseña pies de página escalables con semántica correcta, grid responsive y comportamiento sticky footer sin hacks frágiles.

¿Cuánto sabes de CSS?

📘 Teoría

Estructura semántica del footer

Marca, enlaces y legal en bloques claros.

Dentro de <footer> organiza contenido en grupos: branding, navegación secundaria y bloque legal.

Cuando hay varias listas de enlaces, usa títulos cortos y jerarquía simple para facilitar escaneo.

Asegura contraste suficiente en fondos oscuros y foco visible en enlaces para teclado.

Semántica: footer + nav cuando proceda.
Accesibilidad: foco visible y enlaces descriptivos.
Consistencia: separa visualmente navegación y legal.

Layout multicolumna responsive

Control bidimensional para el 'Fat Footer'.

Usa repeat(auto-fit, minmax()) para que las columnas se reorganicen automáticamente según ancho disponible.

Esto evita breakpoints excesivos y mantiene un footer legible en móvil, tablet y escritorio.

Grid de footer adaptable

.site-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background: #0f172a;
  color: #e2e8f0;
}

Sticky footer sin hacks

Cómo evitar que el footer 'flote' en páginas con poco contenido.

Cuando una página tiene poco contenido, el footer puede quedar a media altura. El patrón moderno lo evita con flex en el contenedor raíz.

Con min-height: 100vh y margin-top: auto en el footer, siempre quedará al final de la ventana.

Implementación del Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  /* El contenido principal crece para ocupar todo el espacio sobrante */
  flex-grow: 1;
}

footer {
  /* El footer se mantiene en su tamaño natural al final */
  margin-top: auto;
  flex-shrink: 0;
}

1 Estructura semántica del footer 2 Layout multicolumna responsive 3 Sticky footer sin hacks

🧪 Aprende probando

🧰 Recursos

Enlaces útiles

MDN - Elemento semántico <footer> MDN CSS MDN Layout Cookbook

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

CodePen: UI cards con hover y layout

Abrir en CodePen

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 75

Componente Sidebar: navegación lateral adaptable

Lección 77

Recursos CSS curados: documentación, generadores y práctica

›