Comment définir une division de contenu pour qu'elle occupe 100 % de la hauteur du corps, à l'exclusion de l'en-tête et du pied de page à hauteur fixe

CSS vous permet de définir des et des mises en page polyvalentes pour les pages Web. Un défi courant consiste à définir une zone de contenu pour qu'elle occupe toute la hauteur de la page tout en excluant l'espace occupé par les éléments à hauteur fixe comme les en-têtes et les pieds de page. Ce guide fournit une solution complète utilisant du CSS pur et compatible avec tous les navigateurs modernes.

La structure HTML comprend un en-tête, un div de contenu et un pied de page. Dans le CSS, nous commençons par nous assurer que les éléments html et body ont une hauteur minimale de 100 % et aucune marge ni remplissage.

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

Pour positionner la zone de contenu, nous introduisons un div #wrapper qui s'étend sur toute la fenêtre d'affichage en utilisant un positionnement absolu.

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

À l'intérieur du #wrapper, nous définissons le div de contenu (#content) avec une hauteur minimale de 100 %. Cela garantit qu'il remplit tout l'espace disponible.

#content {
  min-height: 100%;
}

Pour tenir compte des hauteurs d'en-tête et de pied de page, nous utilisons des marges négatives pour les compenser.

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

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

Cette approche garantit que la division de contenu occupe l'espace restant après avoir pris en compte les hauteurs fixes de l'en-tête et du pied de page, ce qui donne lieu à une mise en page transparente et dynamique qui s'adapte aux différentes tailles d'écran et orientations des appareils.