Css Html Footer Sticky Footer

Comment faire en sorte que votre Footer reste en bas d’une page Web

Créer une page web qui maintient sa structure à travers différents navigateurs peut parfois être un défi. Un problème courant auquel de nombreux développeurs sont confrontés est de s’assurer que le footer reste en bas de la page, quelle que soit la hauteur du contenu. Si vous avez des difficultés avec ce problème, vous êtes au bon endroit. Dans cet article, nous allons explorer une approche simple pour obtenir un footer collant qui reste ancré au bas de votre page.

Lors de la conception d’une mise en page simple avec deux colonnes, vous pouvez rencontrer une situation où votre footer ne fonctionne pas comme prévu. Ce n’est pas inhabituel que le footer flotte de manière incongrue au milieu de la page lorsqu’il n’y a pas suffisamment de contenu pour le pousser vers le bas. En revanche, lorsque le contenu est suffisant, il fonctionne comme prévu – c’est pourquoi trouver une solution temporaire ou un contournement peut être frustrant.

Avoir un footer qui reste en bas améliore l’expérience utilisateur en :

  • Fournissant un accès facile aux liens importants.
  • Améliorant l’esthétique globale.
  • Assurant la cohérence sur différentes tailles d’écran et appareils.

Solution : Créer un Footer Collant

Pour garantir que votre footer reste ancré en bas de la page, nous allons utiliser une simple combinaison de CSS et HTML. Décomposons les étapes nécessaires pour y parvenir.

Guide Étape par Étape

  1. Enveloppez Votre Contenu
    Tout d’abord, vous devez créer un <div> pour votre contenu principal. Attribuez-lui une classe appelée wrapper.

    <div class="wrapper">
    <!-- Votre contenu va ici -->

  2. Ajoutez un Div de Poussée
    Juste avant la balise de fermeture </div> du wrapper, insérez un <div> vide avec la classe push. Cet élément garantira que la hauteur du footer est prise en compte.

    <div class="push"></div>
</div> <!-- Fin du wrapper -->

  3. Insérez le Footer
    Maintenant, après la balise de fermeture du wrapper, créez le <div> pour le footer et attribuez-lui une classe appelée footer.

    <div class="footer">
    <!-- Le contenu du footer va ici -->
</div>

Structure HTML Complète

Votre HTML devrait ressembler à cela maintenant :

<div class="wrapper">
    <!-- Votre contenu ici -->
    <div class="push"></div>
</div>
<div class="footer">
    <!-- Contenu du footer ici -->
</div>

Styles CSS Requis

Pour garantir que votre mise en page fonctionne correctement, appliquez le CSS suivant :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* La marge inférieure est la valeur négative de la hauteur du footer */
}
.footer, .push {
    height: 142px; /* .push doit correspondre à la hauteur de .footer */
}

Dernières Pensées

Avec les étapes décrites ci-dessus, vous devriez maintenant avoir un footer collant fonctionnel qui améliore l’utilisabilité de votre site web. Cette configuration garantit qu’à mesure que votre contenu s’ajuste, votre footer se comporte de manière prévisible sur différents navigateurs.

N’oubliez pas de toujours tester votre conception dans plusieurs navigateurs pour garantir une cohérence de comportement. En mettant en œuvre cette solution, vous pouvez éviter tout problème de mise en page indésirable et présenter à vos visiteurs une apparence soignée et professionnelle.

Si vous avez apprécié ce guide ou si vous avez des questions, n’hésitez pas à laisser un commentaire ci-dessous ! Bon codage !