Comment conserver un pied de page en bas de page avec un en-tête fixe ?

Garder le pied de page en bas de page avec un en-tête fixe

Problème :

Vous souhaitez placer le pied de page tout en bas de la page, en dessous de tout autre contenu, et qu'il reste en place lors du défilement, sans coller à l'écran comme le ferait une position fixe.

Solution :

Méthode de Ryan Fait

Cette approche convient aux scénarios où l'en-tête et le pied de page ont des hauteurs fixes. Cela implique :

1. Définir la hauteur de et à 100 % pour garantir que la prochaine étape fonctionne.
2. Donner le
   contenant le contenu de la page (#content) d'une hauteur minimale de 100%.
3. Tirer le pied de page vers le haut en appliquant une marge inférieure négative au #content égale à la hauteur du pied de page et en définissant sa position sur relative.
4. Ajouter un élément d'espacement à la fin du #content ou utiliser une combinaison de padding-bottom et box-sizing : border-box pour empêcher le contenu de se cacher derrière le pied de page.

Ajout de l'en-tête

Pour inclure un en-tête tout en conservant la position du pied de page :

1. Ajoutez l'en-tête au #content s'il doit rester dans un flux normal.
2. Si l'en-tête nécessite un positionnement absolu, ajoutez des entretoises ou utilisez padding-top et box-sizing : border-box pour éviter le chevauchement du contenu.

Considérations :

• Les navigateurs modernes prennent en charge le dimensionnement de la boîte : border -box, mais si un support plus large est requis, utilisez des entretoises.
• Assurez-vous que les hauteurs de l'en-tête et du pied de page sont fixes pour que cette méthode travail.