Comment faire en sorte qu'une division de contenu dynamique remplisse la hauteur du corps restant après l'en-tête et le pied de page ?

Assurer qu'une division de contenu dynamique remplisse la hauteur du corps restante après l'en-tête et le pied de page

Réaliser une division de contenu qui s'étend sur la hauteur du corps restante après un en-tête et un pied de page à hauteur fixe est un défi CSS commun. La solution complète suivante résout ce problème dans les navigateurs modernes et Internet Explorer 8.

Dans cet exemple, enveloppez le contenu dans un div "#wrapper", positionné de manière absolue et couvrant toute la fenêtre d'affichage. Définissez la propriété "min-height" sur 100 % pour vous assurer qu'elle occupe au moins cette hauteur, et ajoutez un remplissage pour tenir compte de l'en-tête et du pied de page.

Imbibez le contenu dans un div "#content" avec un "min-height" de 100 % pour occuper la hauteur restante. Donnez à l'en-tête et au pied de page des hauteurs fixes et ajustez leurs marges négativement pour compenser le remplissage dans le div "#wrapper".

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

Cette solution ajuste dynamiquement la hauteur du div de contenu en fonction de la taille de la fenêtre d'affichage, garantissant il remplit de manière transparente l'espace corporel restant tout en accueillant l'en-tête et le 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!