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

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.

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< 🎜 Il y a un écart de 20 px entre > 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!