Layout con footer y sidebar fijos

Un pie de página sticky permanece en la parte inferior de la ventana gráfica cuando el contenido es corto, pero se desplaza hacia abajo cuando el contenido es largo. El desafío histórico consistía en fijar el pie de página sin conocer la altura del contenido ni usar JavaScript.

La solución moderna más sencilla es: body { display: flex; flex-direction: column; min-height: 100vh; } y main { flex: 1; }. El contenido principal crece para ocupar el espacio disponible y empuja el pie de página hasta la parte inferior, independientemente de la longitud del contenido.

Una alternativa con CSS Grid es: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. El encabezado obtiene una altura automática, main recibe 1fr (ocupa el espacio restante) y el pie de página obtiene una altura automática. Es una solución clara y explícita: la plantilla de filas muestra claramente la intención del diseño.

position: sticky; bottom: 0 en el pie de página lo fija al borde inferior de la ventana gráfica mientras se desplaza, pero solo cuando su contexto de desplazamiento lo permite. Funciona para pies de página dentro de un contenedor con desplazamiento, pero es menos apropiado para pies de página sticky a nivel de página, donde Flexbox o Grid ofrecen una solución más limpia.

Para un diseño con barra lateral y contenido principal: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. El min-width: 0 en main evita que los elementos flex desborden su contenedor cuando contienen contenido ancho.

Barra lateral con Grid: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. La columna de la barra lateral tiene un ancho fijo y la columna de contenido ocupa el espacio restante. Añada una fila para el encabezado con grid-template-rows: auto 1fr y haga que la barra lateral abarque ambas filas.

En dispositivos móviles, coloque la barra lateral encima o debajo del contenido principal: use una media query para cambiar de un diseño de columnas de Grid a una pila de una sola columna. Otra opción es usar grid-template-columns: min(280px, 30%) 1fr para crear una barra lateral fluida que se reduzca en ventanas gráficas más pequeñas.

Haga que una barra lateral se desplace de forma independiente: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. La barra lateral permanece visible mientras se desplaza el contenido principal, lo que resulta ideal para barras laterales de navegación o de índice en páginas con contenido extenso.

Una barra lateral contraíble alterna entre un estado de ancho completo y otro de solo iconos. Use una propiedad personalizada de CSS para el ancho de la barra lateral: --sidebar-width: 280px en el contenedor, y cámbielo a 64px mediante una clase. Las transiciones animan suavemente el cambio de ancho.

Una barra lateral con posición fija (position: fixed; left: 0; top: 0; height: 100vh) requiere compensar el contenido principal según el ancho de la barra lateral: main { margin-left: 280px }. En dispositivos móviles, la barra lateral se desliza sobre el contenido e incluye un botón de cierre y una superposición de fondo.

Marque las barras laterales de navegación con <nav> y aria-label="Sidebar navigation". Las barras laterales contraíbles necesitan un botón de alternancia accesible con aria-expanded y aria-controls. Los enlaces para saltar ayudan a los usuarios de teclado a omitir las barras laterales y llegar al contenido principal.

¿Por qué es necesario establecer min-width: 0 en el elemento flex del contenido principal en un diseño con barra lateral?

Flexbox con flex: 1 en main o una cuadrícula de tres filas permiten crear pies de página sticky con un CSS mínimo. Los diseños con barras laterales utilizan definiciones de columnas fijas o fluidas y puntos de interrupción adaptables para contraerse en dispositivos móviles. Las barras laterales sticky, los anchos contraíbles y los atributos ARIA accesibles completan patrones de producción para barras laterales y pies de página.