Comment obtenir une division de hauteur du corps à 100 % avec un en-tête et un pied de page fixes ?

Atteindre une division de hauteur du corps à 100 % avec en-tête et pied de page fixes

Situation initiale :

Dans une mise en page Web , vous souhaitez créer un div de contenu qui remplit toute la hauteur du corps, à l'exclusion de l'en-tête et du pied de page à hauteur fixe.

Solution :

1. Établissez une ligne de base de hauteur minimale :

   Déclarez les éléments HTML et body avec une hauteur minimale : 100 % ;. Cela garantit qu'ils s'étendent sur toute la hauteur de la fenêtre.

2. Créez un wrapper pour le contenu :

   Créez un div #wrapper qui contient tout, à l'exclusion de l'en-tête et du pied de page. Positionnez-le de manière absolue et contraignez-le aux dimensions complètes de la fenêtre.

3. Définissez la zone de contenu :

   À l'intérieur du #wrapper, créez un #content div pour le contenu principal. Réglez sa hauteur minimale à 100 % pour remplir l'espace restant.

4. Positionnez l'en-tête et le pied de page :

   Ajoutez des éléments d'en-tête et de pied de page avec hauteurs fixes et couleurs appropriées. Utilisez les propriétés margin-top et margin-bottom avec des valeurs négatives pour les positionner au-dessus et en dessous du #wrapper.

Implémentation :

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

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

Ce code garantit que le div #content remplit toute la hauteur du corps tout en acceptant l'en-tête et le pied de page à hauteur fixe. Il fonctionne dans les navigateurs modernes et IE8 avec le script Modernizr (ou peut être modifié pour utiliser des divs au lieu des éléments d'en-tête et de pied de page).

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!