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

La maintenance du pied de page en bas de la page est une exigence de conception Web courante. Cependant, certains utilisateurs rencontrent des difficultés en utilisant la propriété de positionnement "absolu". Cet article vous guidera à travers l'implémentation CSS correcte pour réaliser un effet de pied de page collant sans perturber votre mise en page.

Problème d'arrière-plan

Les utilisateurs tentant de corriger leur position de pied de page 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 style 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 de l'élément de pied de page (par exemple, 100px).

Remarque: il est recommandé d'utiliser le HTML Element ID "# bottom-footer" au lieu de " style.