Maison > Article > interface Web > Comment puis-je développer un élément DIV vers le bas de la page ?
Comment puis-je développer un élément DIV vers le bas de la page ?
- Barbara Streisandoriginal
- 2024-11-27 20:40:11413parcourir
Application de l'expansion DIV jusqu'au bas de la page
Dans la conception Web, il est parfois nécessaire qu'un bloc DIV s'étende jusqu'au bas de la page, même dans l'absence de contenu. Cela peut être difficile, car les DIV ne s'étendent généralement que si nécessaire pour s'adapter à leur contenu.
Aperçu du problème
Considérez le balisage suivant :
<body> <div>
Le but est de forcer le DIV avec id="content" à s'étirer verticalement, atteignant le bas de la page, quel que soit le contenu.
Solution
Le problème ne réside pas dans la hauteur du contenu DIV, mais dans le conteneur qui l'entoure. Pour remédier à cela, appliquez le CSS suivant aux éléments html et body :
html, body { height:100%; }
Cela garantit que le navigateur restitue la page avec une hauteur de 100 %, permettant au contenu DIV de s'étendre pleinement jusqu'à ses limites.
Considérations supplémentaires
Bien que cette solution résolve la majorité des cas, elle est Il est important de noter que différents navigateurs peuvent implémenter les calculs de hauteur de manière légèrement différente. Voici quelques ressources utiles qui fournissent davantage aperçu :
- 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
De plus, consultez http://quirksmode.org/ pour des informations complètes sur la compatibilité des navigateurs.
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!