Maison >interface Web >tutoriel CSS >Comment conserver un pied de page en bas de page même lors du défilement ?

Comment conserver un pied de page en bas de page même lors du défilement ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-15 14:41:14525parcourir

How to Keep a Footer at the Bottom of the Page Even When Scrolling?

Positionner la division en bas du contenu avec des barres de défilement débordées

Lorsque le contenu de la page s'étend au-delà de la fenêtre d'affichage, les développeurs sont souvent confrontés au problème des pieds de page apparaissant au-dessus du limite inférieure de la page. Pour résoudre ce problème, considérez l'implémentation décrite dans l'image fournie.

L'extrait CSS initialement utilisé, comportant position : absolue et bas : 30 px, positionne le div en bas de la fenêtre. Cependant, lors du défilement, le div reste stationnaire, se détachant de la limite inférieure du contenu.

Solution

L'approche optimale pour ancrer le div de manière persistante au bas du contenu nécessite l'emploi d'un positionnement fixe. Voici le CSS révisé :

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Cette modification permet d'obtenir l'effet souhaité. Le div reste fixe au bas de tout le contenu, quel que soit le défilement. Le violon fourni démontre ce comportement : http://jsfiddle.net/uw8f9/.

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!

Déclaration:
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