Comment créer un pied de page collant en CSS sans positionnement absolu ?

Comment créer un pied de page réactif à l'aide de CSS

Le maintien du pied de page en bas de la page est une exigence courante en matière de conception Web. Cependant, certains utilisateurs rencontrent des difficultés à utiliser la propriété de positionnement « absolu ». Cet article vous guidera dans l'implémentation correcte du CSS pour obtenir un effet de pied de page collant sans perturber votre mise en page.

Contexte du problème

Les utilisateurs qui tentent de corriger la position de leur pied de page sans succès ont généralement appliqué le code suivant :

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Solution proposée

Pour résoudre le problème sans utiliser de plugins ou d'éléments HTML supplémentaires, suivez ces étapes :

1. Ajoutez les règles CSS suivantes à votre feuille de style :

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. Assurez-vous que la hauteur spécifiée dans "body {margin}" correspond à la hauteur réelle hauteur de l'élément de pied de page (par exemple, 100 px).

Remarque : Il est recommandé d'utiliser l'ID de l'élément HTML. "#bottom-footer" pour le ciblage au lieu de "footer #bottom-footer", car ce dernier peut entrer en conflit avec votre style CSS d'origine.

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!