Maison >interface Web >tutoriel CSS >Comment créer un pied de page fixe en bas d'une page en HTML ?

Comment créer un pied de page fixe en bas d'une page en HTML ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-17 08:17:03470parcourir

How to Create a Fixed Footer at the Bottom of a Page in HTML?

Création d'un pied de page fixe en bas de page

En HTML, un pied de page est généralement représenté par une classe div nommée « pied de page ». Pour fixer cet élément en bas de page, certaines propriétés CSS doivent être implémentées.

Le code CSS fourni positionne le pied de page de manière relative avec une valeur supérieure de 490px, ce qui n'est pas adapté pour fixer le pied de page au bas. De plus, le code ne spécifie pas de propriété width, ce qui fait que le pied de page ne remplit pas la largeur de la page.

Pour créer un pied de page fixe, une combinaison de propriétés CSS peut être utilisée. Une approche courante consiste à utiliser la technique du « pied de page collant ». Voici comment cela peut être mis en œuvre :

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}
<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

En utilisant cette technique, l'élément de pied de page restera fixe en bas de la page, même si le contenu de la page s'ajuste en hauteur.

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