Resolvendo o posicionamento de div de preenchimento de espaço entre cabeçalho e rodapé

Na transição de layouts baseados em tabela para div, surge um obstáculo comum: garantir um espaçamento coeso e responsivo entre divs de cabeçalho, conteúdo e rodapé. Esta é uma abordagem confiável usando o Flexbox:

Solução Flexbox

O layout flexível permite distribuir espaço dinamicamente, permitindo alturas naturais de cabeçalho e rodapé enquanto o conteúdo preenche perfeitamente a área restante. Isso imita o comportamento intuitivo de aplicativos móveis nativos, onde cabeçalhos e rodapés aderem às bordas superior e inferior da janela de visualização, deixando o conteúdo rolável na seção principal.

Implementação de HTML e CSS

O código a seguir demonstra a solução:

  

    ...
  
  

    ...
  
  
  

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Ao aproveitar a flexibilidade do Flexbox, você pode alocar espaço em sua página da web de maneira elegante e responsiva, garantindo a experiência ideal do usuário, independentemente da resolução da tela.