Comment positionner un pied de page en bas d'une page avec un en-tête fixe ?

Positionnement du pied de page en bas d'une page avec un en-tête fixe

Comprendre le problème et les exigences :

Vous recherchez pour positionner le pied de page tout en bas de la page, même lorsqu'il y a un en-tête fixe. Cela élimine l'utilisation de position : fixe ou le fait d'avoir le pied de page en bas de l'écran visible.

Méthode Sticky Footer de Ryan Fait :

Nous utiliserons l'approche de Ryan Fait comme il répond à vos besoins spécifiques conditions :

Étapes :

1. Définir le HTML et la hauteur du corps à 100 % : Définir la hauteur : 100 % pour et pour établir une hauteur de fenêtre d'affichage de 100 %.
2. Donner au contenu une hauteur minimale de 100 % : Attribuez au #contenu une hauteur minimale : 100 % pour vous assurer qu'il occupe toute la hauteur de la fenêtre d'affichage.
3. Positionner le pied de page de manière absolue et décaler le contenu : Pour positionner le pied de page en dessous du #content, donnez #content une marge inférieure négative égale à la hauteur du pied de page. Ensuite, positionnez #footer absolument pour le placer au-dessus de #content.

4. Empêcher le contenu de se chevaucher dans le pied de page : Deux options :

   • Espacement Élément : Ajouter un
   • Padding-Bottom et Box-Sizing : Utilisez padding-bottom : 100px et box-sizing : border-box sur #content (avec les préfixes de fournisseur appropriés).

   Ajout l'En-tête :

   1. En-tête en Normal Flux : Pour un en-tête dans le flux normal, imbriquez-le dans #content.
   2. En-tête absolument positionné : Pour positionner l'en-tête de manière absolue, ajustez le haut du remplissage de #content en conséquence.

   Approche moderne avec Box-Sizing :

   Les navigateurs modernes prennent entièrement en charge le dimensionnement de la boîte : border-box, ce qui élimine le besoin d'éléments d'espacement. Cependant, l'utilisation d'éléments d'espacement reste adaptée à une compatibilité plus large des navigateurs.

   Conclusion :

   Cette approche fournit une solution robuste pour positionner le pied de page en bas de page avec un en-tête fixe, assurant un affichage optimal sur tous les appareils.