Maison > interface Web > tutoriel CSS > Introduction à cinq façons d'implémenter le placement du pied de page à l'aide de CSS

Introduction à cinq façons d'implémenter le placement du pied de page à l'aide de CSS

高洛峰
Libérer: 2017-03-19 09:24:26
original
1750 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de cinq méthodes CSS pour implémenter le fond de pied de page. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Le pied de page collant signifie que la partie pied de page de la page Web est toujours en bas de la fenêtre du navigateur.

Lorsque le contenu de la page Web est suffisamment long pour dépasser la hauteur visible du navigateur, le pied de page sera poussé vers le bas de la page Web avec le contenu, mais si le contenu de la page Web ; n'est pas assez long, le pied de page inférieur restera en bas de la fenêtre du navigateur.

Introduction à cinq façons dimplémenter le placement du pied de page à laide de CSS

Méthode 1 : définir la marge inférieure de la partie contenu sur un nombre négatif


<p class="wrapper">
    <!-- content -->
    <p class="push"></p>
</p>
<p class="footer">footer</p>
Copier après la connexion



html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}
Copier après la connexion


1. élément conteneur (p.push).

2. La marge inférieure de p.wrapper doit être la même que la valeur -height de p.footer. Notez qu'il s'agit d'une hauteur négative.

Méthode 2 : Définir la marge supérieure du pied de page sur un nombre négatif

Ajouter un élément parent en dehors du contenu et laisser le remplissage de la partie contenu -Le bas est égal à la hauteur du pied de page.


<p class="content">
  <p class="content-inside">
    <!-- content -->
  </p>
</p>
<p class="footer">footer</p>
Copier après la connexion



html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}
Copier après la connexion


Méthode 3 : utilisez calc() pour définir la hauteur du contenu


<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copier après la connexion
Copier après la connexion
Copier après la connexion



.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
Copier après la connexion


Ici, on suppose qu'il y a un espacement de 20px entre p.content et p.footer, donc 70px=50px 20px

Méthode 4 : Utiliser la mise en page flexbox

La hauteur du pied de page des trois méthodes ci-dessus est corrigée. S'il y a trop de contenu dans le pied de page, la mise en page peut être détruite.


<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copier après la connexion
Copier après la connexion
Copier après la connexion



html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
Copier après la connexion


Méthode cinq : utiliser la disposition en grille


<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copier après la connexion
Copier après la connexion
Copier après la connexion



html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
Copier après la connexion


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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal