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
Libérer: 2024-11-17 08:17:03
original
477 Les gens l'ont consulté

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 */
}
Copier après la connexion
<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal