¿Cómo hacer que un div ocupe el 100% de la altura de la ventana del navegador?

Introducción a las Longitudes de Porcentaje de Ventana Gráfica

CSS3 introdujo las longitudes de porcentaje de ventana gráfica, que son unidades relativas al tamaño de la ventana gráfica. La unidad de altura de ventana gráfica (vh) ayuda a crear elementos de altura completa. Un vh equivale al 1% de la altura de la ventana gráfica, por lo que 100vh representa la altura total de la ventana del navegador.

A diferencia de los valores porcentuales, las unidades vh se basan en el tamaño de la ventana gráfica, no en el elemento padre. Esto las hace confiables para crear diseños de altura completa en diferentes dispositivos y tamaños de pantalla.

Implementando 100vh para Divs de Altura Completa

Para crear un div de altura completa usando unidades de ventana gráfica, usa este CSS:

.full-height {
  height: 100vh;
}

Este código hace que el div se extienda a la altura completa de la ventana del navegador, independientemente de su posición en el documento.

Las unidades de ventana gráfica ofrecen ventajas para el diseño responsivo:

• La altura del div cambia cuando se redimensiona la ventana del navegador.
• Funciona en varios dispositivos y tamaños de pantalla.
• No se necesitan cálculos complejos ni JavaScript para diseños de altura completa.

Usar JavaScript para ajustar la altura dinámicamente

JavaScript ofrece otra forma de ajustar la altura del div de manera dinámica. Este método mide la altura de la ventana y establece la altura del div en consecuencia. Aquí tienes un ejemplo:

function setDivHeight() {
  var windowHeight = window.innerHeight;
  document.getElementById('myDiv').style.height = windowHeight + 'px';
}

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

Este enfoque tiene algunas ventajas:

• Funciona en navegadores antiguos que no admiten unidades de viewport.
• Permite cálculos más complejos si es necesario.

Sin embargo, también tiene algunas desventajas:

• Requiere que JavaScript esté habilitado.
• Puede causar cambios en el diseño si JavaScript se carga lentamente.
• Implica más código para mantener en comparación con la solución CSS.

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

window.addEventListener('resize', debounce(setDivHeight, 250));

Diseño Flexbox para columnas de altura completa

Flexbox es un modelo de diseño CSS que puede resolver el problema de la altura completa. Proporciona una forma de crear elementos contenedores flexibles. Para usar Flexbox para columnas de altura completa:

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

.column {
  flex: 1;
}

Este método ofrece varias ventajas:

• Crea columnas de igual altura.
• Permite centrar verticalmente el contenido.
• Es responsive y se adapta a diferentes tamaños de pantalla.

Flexbox resuelve el problema de la altura completa haciendo que el contenedor padre ocupe toda la altura del viewport, y luego permitiendo que los elementos hijos crezcan y llenen ese espacio. Este enfoque es útil para diseños con múltiples columnas o estructuras complejas.