Maison > interface Web > tutoriel CSS > Comment ancrer une division au bas du contenu d'une page dynamique ?

Comment ancrer une division au bas du contenu d'une page dynamique ?

Susan Sarandon
Libérer: 2024-12-13 00:47:10
original
795 Les gens l'ont consulté

How to Anchor a Div to the Bottom of Dynamic Page Content?

Ancrer un Div au bas du contenu de la page avec du contenu dynamique

Problème :

Vous devez créer un div (#footer) qui reste au bas du contenu de la page, même lorsque les barres de défilement s'affichent. Contrairement au positionnement fixe, il ne doit être positionné qu'à la fin du contenu réel, pas dans la fenêtre d'affichage.

Implémentation actuelle :

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}
Copier après la connexion

Cette méthode positionne le div en bas de la fenêtre, mais il y reste fixe même lorsque la page défile, ce qui entraîne un désalignement avec le content.

Solution : Position fixe avec réglage du bas

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Copier après la connexion

En définissant la position sur fixe, le div devient anclado au bas de la fenêtre du navigateur. La propriété bottom garantit que le div est positionné à la base absolue de la page, quelle que soit la visibilité de la barre de défilement.

Ce positionnement permet au div de rester aligné avec le bas du contenu, comme illustré dans l'exemple.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal