Maison  >  Article  >  interface Web  >  Partage de cinq façons d'implémenter le placement du pied de page avec CSS

Partage de cinq façons d'implémenter le placement du pied de page avec CSS

黄舟
黄舟original
2017-05-26 14:06:381645parcourir

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 sera placé en bas restera en bas de la fenêtre du navigateur.

Partage de cinq façons d'implémenter le placement du pied de page avec CSS

Méthode 1 : Définissez le <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a> dans la partie contenu sur un nombre négatif

<p class="wrapper">
    <!-- content -->
    <p class="push"></p>
</p>
<p class="footer">footer</p>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}
  1. Cette méthode nécessite des éléments d'espace réservé supplémentaires (p.push) dans le conteneur. Le

    de
  2. p.wrappermargin-bottom doit être le même que la valeur p.footer de -height. Notez qu'il s'agit d'un height négatif.

Méthode 2 : Définir le <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a> du pied de page sur un nombre négatif

  • Ajouter un élément parent en dehors du contenu, et faire en sorte que le Le <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a> de la partie contenu 🎜> est égal à celui du pied de page height.

<p class="content">
  <p class="content-inside">
    <!-- content -->
  </p>
</p>
<p class="footer">footer</p>
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;
}

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

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
  • Supposons ici et p.content, donc 70px=50px+20pxp.footer

Méthode 4 : Utiliser la disposition flexbox

pied de page des trois méthodes ci-dessus la hauteur est fixe 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>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
Méthode 5 : Utiliser la disposition en grille

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

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