Cómo configurar una división de contenido para que ocupe el 100% de la altura del cuerpo, excluyendo el encabezado y pie de página de altura fija

CSS le permite definir con precisión y diseños versátiles para páginas web. Un desafío común es configurar un área de contenido para que ocupe toda la altura de la página y al mismo tiempo excluir el espacio que ocupan elementos de altura fija como encabezados y pies de página. Esta guía proporciona una solución integral que utiliza CSS puro y es compatible con todos los navegadores modernos.

La estructura HTML incluye un encabezado, un div de contenido y un pie de página. En CSS, comenzamos asegurándonos de que los elementos html y body tengan una altura mínima del 100% y no tengan márgenes ni relleno.

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

Para posicionar el área de contenido, introducimos un div #wrapper que abarca toda la ventana gráfica usando posicionamiento absoluto.

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Dentro del #wrapper, definimos el div de contenido (#content) con una altura mínima del 100%. Esto garantiza que llene todo el espacio disponible.

#content {
  min-height: 100%;
}

Para tener en cuenta las alturas del encabezado y pie de página, utilizamos márgenes negativos para compensarlos.

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}

Este enfoque garantiza que la división de contenido ocupe el espacio restante después de tener en cuenta las alturas fijas del encabezado y pie de página, lo que da como resultado un diseño fluido y dinámico que se adapta a diferentes tamaños de pantalla y orientaciones del dispositivo.