Maison > Article > interface Web > 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.
<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; }
Cette méthode nécessite des éléments d'espace réservé supplémentaires (p.push
) dans le conteneur. Le
p.wrapper
margin-bottom
doit être le même que la valeur p.footer
de -height
. Notez qu'il s'agit d'un height
négatif.
<a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>
du pied de page sur un nombre négatifAjouter 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; }
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
<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!