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

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

Afin de positionner un pied de page en bas d'une page, tout en ayant un en-tête fixe, il faut adopter une approche qui ne s'appuie pas sur la « position : fixe », qui placerait le pied de page par rapport au fenêtre d'affichage au lieu de la page elle-même.

Tirer parti de la méthode de Ryan Fait

L'approche de Ryan Fait est simple et efficace pour les scénarios dans lesquels l'en-tête et le pied de page ont des hauteurs fixes. :

1. Définissez la hauteur des deux éléments et éléments à 100 %.
2. Donnez à l'élément #content une hauteur minimale de 100 % pour pousser le #footer vers le bas de la page.
3. Utilisez une marge inférieure négative sur #content pour tirer le pied de page. vers le bas.
4. Ajustez le positionnement du pied de page par rapport au #content pour vous assurer qu'il apparaît en haut.
5. Ajoutez un spacer ou utilisez padding-bottom et box-sizing sur #content pour gérer le contenu excédentaire et éviter qu'il ne se chevauche avec le pied de page.

Incorporation de l'en-tête

Si l'en-tête doit rester dans son flux normal, ajoutez-le simplement dans #content. Pour le positionner de manière absolue, vous pouvez utiliser une entretoise ou une combinaison de rembourrage supérieur et de dimensionnement de la boîte.

Navigateurs et alternatives compatibles

Boîte de prise en charge des navigateurs modernes -dimensionnement : bordure-boîte. Pour une prise en charge plus large du navigateur, envisagez plutôt d'utiliser des éléments d'espacement.

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!