Maison > interface Web > tutoriel CSS > Comment implémenter et dépanner un pied de page collant CSS ?

Comment implémenter et dépanner un pied de page collant CSS ?

DDD
Libérer: 2024-12-09 13:54:11
original
951 Les gens l'ont consulté

How to Implement and Troubleshoot a CSS Sticky Footer?

Pied de page collant CSS : dépannage et implémentation

De nombreux développeurs Web rencontrent des difficultés lors de la mise en œuvre d'un pied de page collant CSS sur leurs sites Web. Un problème courant est l'apparition de contenu s'étendant au-delà de son conteneur, provoquant des barres de défilement indésirables. Un autre problème survient lorsque l'image d'arrière-plan du pied de page est tronquée et ne s'étend pas sur toute la hauteur de la page.

Dépannage du débordement de contenu

Dans le code HTML fourni , le div #content déborde de son conteneur et s'étend au-delà du div #page. Pour résoudre ce problème, vous pouvez définir une hauteur maximale ou une propriété de débordement pour le div #content. Voici un CSS modifié :

#content {
    max-height: calc(100% - 40px);
    overflow: auto;
}
Copier après la connexion

Extension de la hauteur de l'image d'arrière-plan

Pour étendre l'image d'arrière-plan du div #footer à toute la hauteur de la page, vous peut définir sa position sur absolue et ajuster sa hauteur en conséquence :

#footer {
    position: absolute;
    bottom: 0;
    height: calc(100% - 40px);
}
Copier après la connexion

Alternative Solutions

Extrait de pied de page collant CSS de CSS Tricks :

Pour une solution rapide, vous pouvez implémenter l'extrait de pied de page collant de CSS Tricks : https://css-tricks.com/snippets/css/sticky-footer/

extrait de pied de page jQuery Sticky :

Vous pouvez également utiliser une solution jQuery de Astuces CSS : https://css-tricks.com/snippets/jquery/jquery-sticky-footer/ (avec une démo en direct).

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal