Résoudre le placement des divs remplissant l'espace entre l'en-tête et le pied de page

Lors de la transition des mises en page basées sur des tableaux vers des mises en page basées sur des div, un obstacle commun se pose : assurer un espacement cohérent et réactif entre divs d’en-tête, de contenu et de pied de page. Voici une approche fiable utilisant Flexbox :

Solution Flexbox

La mise en page Flex vous permet de distribuer dynamiquement l'espace, en permettant des hauteurs naturelles d'en-tête et de pied de page tandis que le contenu remplit de manière transparente la zone restante. Cela imite le comportement intuitif des applications mobiles natives, où les en-têtes et les pieds de page adhèrent aux bords supérieur et inférieur de la fenêtre, laissant le contenu défiler dans la section principale.

Implémentation HTML et CSS

Le code suivant démontre la solution :

  

    ...
  
  

    ...
  
  
  

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;
}

En tirant parti de la flexibilité de Flexbox, vous pouvez allouer de l'espace de manière élégante et réactive au sein de votre page Web, garantissant une expérience utilisateur optimale quelle que soit la résolution de l'écran.