Comment définir une hauteur de division à 100 % du corps moins l'en-tête et le pied de page à hauteur fixe ?

Définition d'une hauteur de division à 100 % du corps moins l'en-tête et le pied de page à hauteur fixe

Si vous souhaitez définir une division de contenu pour occuper 100 % de la hauteur du corps, à l'exclusion des éléments d'en-tête et de pied de page à hauteur fixe, l'utilisation de CSS est la solution idéale. Voici une technique à toute épreuve qui fonctionne sur tous les navigateurs :

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

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

Décomposons les éléments clés de cette approche :

• Positionnement absolu : Le div #wrapper est positionné de manière absolue, lui permettant de s'étendre sur toute la hauteur de la fenêtre.
• Marges négatives : Les éléments d'en-tête et de pied de page utilisent des marges négatives pour chevaucher le #wrapper. Cela crée l'illusion qu'ils sont corrigés tout en donnant à la div #content l'espace nécessaire.
• Hauteur minimale : Les divs #wrapper et #content ont une hauteur minimale fixée à 100 %. Cela garantit qu'ils remplissent l'espace restant non occupé par l'en-tête et le pied de page.

Cette technique fournit une solution multi-navigateurs qui définit de manière fiable le div de contenu à 100 % de la hauteur du corps, moins les valeurs fixes. éléments d'en-tête et de pied de page en hauteur.

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!