Comment faire en sorte qu'une division de contenu remplisse 100 % de la hauteur du corps, à l'exclusion de l'en-tête et du pied de page fixes ?

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.

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}</code>

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

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

À 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.

<code class="css">#content {
  min-height: 100%;
}</code>

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

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

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

Cette approche garantit que le content div 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 une mise en page transparente et dynamique qui s'adapte aux différentes tailles d'écran et orientations de l'appareil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!