Maison > Article > interface Web > 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 :
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!