Maison >interface Web >tutoriel CSS >Comment réparer un pied de page en bas d'une page Web ?

Comment réparer un pied de page en bas d'une page Web ?

DDD
DDDoriginal
2024-12-16 10:55:171036parcourir

How to Fix a Footer to the Bottom of a Web Page?

Comment réparer le pied de page en bas de page

De nombreux sites Web rencontrent le problème d'avoir un pied de page qui n'est pas fixé en bas de la page page, en particulier sur les pages avec une petite quantité de contenu. Pour garantir que le pied de page reste en bas de page, quelle que soit la taille de l'écran ou la longueur du contenu, voici une solution CSS :

#footer {</p>
<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

Ce code attribue les propriétés suivantes au footer:

  • position : définit le positionnement du pied de page sur fixe, garantissant qu'il reste en place quelle que soit la position de défilement de la page.
  • hauteur : Spécifie la hauteur du footer.
  • background-color : Ajuste la couleur d'arrière-plan du pied de page à des fins de démonstration.
  • bottom : Positionne le bord inférieur du pied de page 0 pixel à partir du bas de la page.
  • left : Aligne le bord gauche de la pied de page sur le bord gauche de la page.
  • right : Aligne le bord droit du pied de page sur le bord droit de la page.
  • margin-bottom  : Supprime toute marge inférieure indésirable.

Pour garantir que le contenu ne chevauche pas le pied de page fixe, un CSS supplémentaire La règle peut être appliquée à l'élément body :

body {</p>
<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

Cela ajoute un 50- marge inférieure en pixels au corps, créant un espace pour l'affichage du pied de page fixe.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn