¿Cómo hacer que un div ocupe el resto de la altura de la pantalla?

Flexbox para el Control del Diseño

Flexbox es un modelo de diseño CSS que ayuda a distribuir el espacio y alinear el contenido en un contenedor. Es útil para crear diseños que se adaptan a diferentes tamaños de pantalla y cantidades de contenido.

Flexbox ayuda a resolver el problema de la altura restante mediante:

• Centrado vertical del contenido
• Distribución del espacio entre o alrededor de los elementos
• Redimensionamiento flexible de los elementos hijos
• Cambio del orden visual de los elementos

La mayoría de los navegadores web modernos admiten Flexbox, incluyendo Chrome, Firefox, Safari y Edge. Internet Explorer 11 tiene soporte parcial, mientras que las versiones más antiguas no lo admiten. Para navegadores más antiguos, es posible que necesites usar otros métodos o incluir polyfills.

Para usar Flexbox, aplica display: flex al contenedor padre. Esto habilita el contexto flex para todos sus hijos directos. Luego puedes usar propiedades flex para controlar cómo se comportan estos elementos hijos dentro del contenedor flex.

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

.content {
  width: 100%;
}

Configuración de la Estructura HTML

Para crear un diseño donde un div ocupe la altura restante de la pantalla, necesitas una estructura HTML simple. Aquí tienes una configuración básica:

<div class="container">
  <header class="header">Contenido del Encabezado</header>
  <main class="main-content">Contenido Principal</main>
  <footer class="footer">Contenido del Pie de Página</footer>
</div>

Esta estructura incluye un div contenedor que alberga tres elementos principales: un encabezado, un área de contenido principal y un pie de página. El div main-content ocupará la altura restante de la pantalla.

<main class="main-content">
  <nav>Menú de navegación</nav>
  <article>Contenido principal del artículo</article>
  <aside>Contenido de la barra lateral</aside>
</main>

Aplicación de Propiedades CSS de Flexbox

Para que este diseño funcione con Flexbox, aplica estas propiedades CSS:

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

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

.header, .footer {
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
}

Estas son las propiedades clave de Flexbox:

1. display: flex; en el contenedor activa el diseño Flexbox.
2. flex-direction: column; apila los elementos hijos verticalmente.
3. min-height: 100vh; hace que el contenedor ocupe al menos toda la altura de la ventana.
4. flex-shrink: 0; en el encabezado y pie de página evita que se reduzcan.
5. flex-grow: 1; en main-content le permite crecer y ocupar el espacio restante.

Esta estructura CSS crea un diseño flexible donde el área de contenido principal se expande para ocupar cualquier espacio disponible entre el encabezado y el pie de página, independientemente de sus tamaños o la cantidad de contenido.

Uso de CSS Grid para Diseños de Altura Completa

CSS Grid es un sistema de diseño que puede crear layouts de altura completa. Permite definir filas y columnas, dando control sobre diseños bidimensionales.

Para usar CSS Grid en un diseño de altura completa:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header, footer {
  grid-row: span 1;
}

main {
  grid-row: 2 / 3;
}

Este CSS crea un diseño de tres filas donde la fila del medio (contenido principal) ocupa el espacio disponible.

CSS Grid comparado con Flexbox:

• Proporciona más control sobre la alineación horizontal y vertical
• Funciona bien para diseños con múltiples filas y columnas
• Tiene menos soporte en navegadores que Flexbox

body {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 3fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Soluciones Basadas en JavaScript

Aunque las soluciones CSS suelen ser mejores, JavaScript también puede crear diseños de altura completa:

function adjustHeight() {
  const header = document.querySelector('header').offsetHeight;
  const footer = document.querySelector('footer').offsetHeight;
  const windowHeight = window.innerHeight;
  const main = document.querySelector('main');
  main.style.height = `${windowHeight - header - footer}px`;
}

window.addEventListener('resize', adjustHeight);
adjustHeight();

Este script calcula el espacio disponible y establece la altura del contenido principal.

Ventajas de usar JavaScript:

• Funciona en navegadores antiguos que no soportan CSS moderno
• Permite cambios basados en el contenido o acciones del usuario

Desventajas de usar JavaScript:

• Puede causar cambios de diseño si no se maneja bien
• Añade complejidad al código
• Puede afectar el rendimiento, especialmente en dispositivos más lentos