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.

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!