Comment puis-je étendre un élément DIV jusqu'au bas de la page sans utiliser de contenu ?

Forcer le bloc DIV à s'étendre jusqu'au bas de la page sans contenu

L'extension d'un bloc DIV au bas d'une page sans contenu peut poser un défi . Pour y parvenir, nous devons d'abord aborder les limites de la flexibilité de la DIV.

Comprendre le problème

Dans le balisage donné, la DIV « contenu » ne s'étend pas jusqu'à le bas de la page car son conteneur, le DIV "menuwrapper", n'a pas une hauteur de 100%. Le contenu DIV est contraint par la taille de son conteneur.

Solution

Pour résoudre ce problème, nous modifions le CSS pour garantir que le conteneur DIV ("menuwrapper") s'étend à toute la hauteur de la page :

html, body {
    height: 100%;
}

Cela définit les éléments HTML et body à 100 % de hauteur, forçant le conteneur DIV pour remplir tout l'espace vertical de la page.

Considérations supplémentaires

Selon le navigateur, des ajustements supplémentaires peuvent être nécessaires, comme la modification des marges ou du remplissage. Reportez-vous aux ressources suivantes pour en savoir plus assistance :

• http://www.brunildo.org/test/html_body_0.html
• http://www.brunildo.org/test/html_body_11b.html
• http://www.brunildo.org/test/index.html

Pour des informations complètes sur Hauteur CSS, visitez http://quirksmode.org/.

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!