Como fazer uma div preencher o restante da altura da tela?

Flexbox para Controle de Layout

Flexbox é um modelo de layout CSS que ajuda a distribuir espaço e alinhar conteúdo em um contêiner. É útil para criar layouts que se adaptam a diferentes tamanhos de tela e quantidades de conteúdo.

O Flexbox ajuda a resolver o problema da altura restante ao:

• Centralizar o conteúdo verticalmente
• Distribuir espaço entre ou ao redor dos itens
• Dimensionar elementos filhos de forma flexível
• Alterar a ordem visual dos elementos

A maioria dos navegadores web modernos suporta Flexbox, incluindo Chrome, Firefox, Safari e Edge. O Internet Explorer 11 tem suporte parcial, enquanto versões mais antigas não o suportam. Para navegadores mais antigos, pode ser necessário usar outros métodos ou incluir polyfills.

Para usar o Flexbox, aplique display: flex ao contêiner pai. Isso ativa o contexto flex para todos os seus filhos diretos. Você pode então usar propriedades flex para controlar como esses elementos filhos se comportam dentro do contêiner flex.

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

.content {
  width: 100%;
}

Configurando a Estrutura HTML

Para criar um layout onde uma div preenche a altura restante da tela, você precisa de uma estrutura HTML simples. Aqui está uma configuração básica:

<div class="container">
  <header class="header">Conteúdo do Cabeçalho</header>
  <main class="main-content">Conteúdo Principal</main>
  <footer class="footer">Conteúdo do Rodapé</footer>
</div>

Esta estrutura inclui uma div container que contém três elementos principais: um cabeçalho, uma área de conteúdo principal e um rodapé. A div main-content preencherá a altura restante da tela.

<main class="main-content">
  <nav>Menu de navegação</nav>
  <article>Conteúdo principal do artigo</article>
  <aside>Conteúdo da barra lateral</aside>
</main>

Aplicando Propriedades CSS do Flexbox

Para fazer este layout funcionar com Flexbox, aplique estas propriedades 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;
}

Aqui estão as propriedades-chave do Flexbox:

1. display: flex; no container ativa o layout Flexbox.
2. flex-direction: column; empilha os elementos filhos verticalmente.
3. min-height: 100vh; faz o container ocupar pelo menos a altura total da viewport.
4. flex-shrink: 0; no cabeçalho e rodapé impede que eles encolham.
5. flex-grow: 1; no main-content permite que ele cresça e preencha o espaço restante.

Esta estrutura CSS cria um layout flexível onde a área de conteúdo principal se expande para preencher qualquer espaço disponível entre o cabeçalho e o rodapé, independentemente dos seus tamanhos ou da quantidade de conteúdo.

Uso do CSS Grid para Layouts de Altura Total

O CSS Grid é um sistema de layout que pode criar layouts de altura total. Ele permite definir linhas e colunas, dando controle sobre layouts bidimensionais.

Para usar o CSS Grid para um layout de altura total:

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 cria um layout de três linhas onde a linha do meio (conteúdo principal) preenche o espaço disponível.

CSS Grid comparado ao Flexbox:

• Oferece mais controle sobre o alinhamento horizontal e vertical
• Funciona bem para layouts com várias linhas e colunas
• Tem menos suporte de navegadores que o Flexbox

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

Soluções Baseadas em JavaScript

Embora as soluções em CSS sejam geralmente melhores, o JavaScript também pode criar layouts de altura total:

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 o espaço disponível e define a altura do conteúdo principal.

Vantagens de usar JavaScript:

• Funciona em navegadores mais antigos que não suportam CSS moderno
• Permite mudanças baseadas no conteúdo ou ações do usuário

Desvantagens de usar JavaScript:

• Pode causar mudanças de layout se não for bem tratado
• Adiciona complexidade ao código
• Pode afetar o desempenho, especialmente em dispositivos mais lentos