Como fazer uma div ocupar 100% da altura da janela do navegador?

Introdução às Unidades de Porcentagem da Viewport

O CSS3 introduziu unidades de porcentagem da viewport, que são unidades relativas ao tamanho da viewport. A unidade de altura da viewport (vh) ajuda a criar elementos de altura total. Um vh equivale a 1% da altura da viewport, então 100vh representa a altura total da janela do navegador.

Diferentemente dos valores percentuais, as unidades vh são baseadas no tamanho da viewport, não no elemento pai. Isso as torna confiáveis para criar layouts de altura total em diferentes dispositivos e tamanhos de tela.

Implementando 100vh para Divs de Altura Total

Para criar uma div de altura total usando unidades de viewport, use este CSS:

.full-height {
  height: 100vh;
}

Este código faz com que a div se estenda à altura total da janela do navegador, independentemente de sua posição no documento.

As unidades de viewport oferecem vantagens para design responsivo:

• A altura da div muda quando a janela do navegador é redimensionada.
• Funciona em vários dispositivos e tamanhos de tela.
• Não são necessários cálculos complexos ou JavaScript para layouts de altura total.

Usando JavaScript para Ajuste Dinâmico de Altura

JavaScript oferece outra maneira de ajustar a altura da div dinamicamente. Esse método mede a altura da janela e define a altura da div de acordo. Aqui está um exemplo:

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

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

Essa abordagem tem alguns benefícios:

• Funciona em navegadores mais antigos que não suportam unidades de viewport.
• Permite cálculos mais complexos, se necessário.

No entanto, também tem algumas desvantagens:

• Requer que o JavaScript esteja habilitado.
• Pode causar mudanças no layout se o JavaScript carregar lentamente.
• É mais código para manter em comparação com a solução CSS.

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

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

Layout Flexbox para Colunas de Altura Total

Flexbox é um modelo de layout CSS que pode resolver o problema de altura total. Ele fornece uma maneira de criar elementos de contêiner flexíveis. Para usar Flexbox para colunas de altura total:

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

.column {
  flex: 1;
}

Este método oferece várias vantagens:

• Cria colunas de altura igual.
• Permite centralização vertical do conteúdo.
• É responsivo e se adapta a diferentes tamanhos de tela.

Flexbox resolve o problema de altura total fazendo com que o contêiner pai ocupe toda a altura da viewport, permitindo que os elementos filhos cresçam e preencham esse espaço. Essa abordagem é útil para layouts com múltiplas colunas ou estruturas complexas.