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

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;
}

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);
}

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!