Comment faire en sorte qu'un DIV remplisse toute la hauteur de la page même lorsqu'il est vide ?

Comment forcer un bloc DIV à remplir la page verticalement même sans contenu

Dans certaines situations, vous pouvez rencontrer un scénario où vous avez besoin un bloc DIV à étendre jusqu'en bas de page quel que soit son contenu. Voici comment y parvenir :

Le problème :

Lorsqu'un bloc DIV n'a pas de contenu, il s'effondre généralement pour occuper uniquement l'espace vertical requis pour ses bordures et rembourrage. Par conséquent, il peut ne pas s'étendre jusqu'au bas de la page, laissant un espace vide.

La solution :

Pour forcer le bloc DIV à remplir la page verticalement , répondez aux éléments suivants :

1. Hauteur de l'élément conteneur : si l'élément conteneur entourant le bloc DIV, tel que le corps ou un div parent n'a pas de hauteur définie à 100 %, le bloc DIV qu'il contient ne peut pas s'étendre au-delà de la hauteur du conteneur. Par conséquent, définissez la hauteur : 100 % ; propriété pour les éléments HTML et body :

html, body {
  height: 100%;
}

2. Marges et remplissage : assurez-vous qu'aucune marge ou remplissage supplémentaire n'est ajouté au bloc DIV ou à son conteneur qui l'empêcherait de s'étendre complètement.

En suivant ces étapes, le bloc DIV va désormais s'étendre jusqu'en bas de la page, même s'il n'a aucun contenu. Cependant, notez que la compatibilité du navigateur et les modes Quirks peuvent affecter le résultat final, alors consultez des ressources comme quirksmode.org pour d'autres ajustements.

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!