Como definir uma div de conteúdo para ocupar 100% da altura do corpo, excluindo cabeçalho e rodapé de altura fixa

CSS permite que você defina dados precisos e layouts versáteis para páginas da web. Um desafio comum é definir uma área de conteúdo para ocupar toda a altura da página e, ao mesmo tempo, excluir o espaço ocupado por elementos de altura fixa, como cabeçalhos e rodapés. Este guia fornece uma solução abrangente usando CSS puro que é compatível com todos os navegadores modernos.

A estrutura HTML inclui um cabeçalho, um div de conteúdo e um rodapé. No CSS, começamos garantindo que os elementos html e body tenham altura mínima de 100% e sem margens ou preenchimento.

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

Para posicionar a área de conteúdo, introduzimos uma div #wrapper que abrange toda a janela de visualização usando posicionamento absoluto.

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

Dentro do #wrapper, definimos a div de conteúdo (#content) com altura mínima de 100%. Isso garante que ele preencha todo o espaço disponível.

#content {
  min-height: 100%;
}

Para levar em conta as alturas do cabeçalho e do rodapé, usamos margens negativas para compensá-las.

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

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

Essa abordagem garante que o div de conteúdo ocupe o espaço restante após contabilizar as alturas fixas do cabeçalho e rodapé, resultando em um layout contínuo e dinâmico que se adapta a diferentes tamanhos de tela e orientações de dispositivos.