Maison > Article > interface Web > Tutoriel pratique CSS pour fixer le pied de page en bas de page
Tutoriel pratique CSS pour fixer le pied de page en bas de page
- 高洛峰original
- 2017-03-10 11:05:131959parcourir
Cet article présente principalement la pratique CSS actuelle consistant à corriger le pied de page en bas de la page. Faites attention au problème de la suppression des flottants CSS. Les amis dans le besoin peuvent se référer à
La position du pied de page<.>
Le pied de page d'une page Web est l'endroit où les liens d'aide et les informations de droits d'auteur sont généralement placés. Le pied de page doit naturellement être situé au bas de la page, mais selon la pratique générale, si le contenu de la page Web avant le pied de page est relativement petit, ou si un moniteur avec une résolution verticale plus grande est utilisé, le pied de page peut ne pas apparaître. la page. La situation en bas est la suivante. 
Comment fixer le pied de page en basUn positionnement absolu est-il possible ?
Lorsque le contenu de la page Web est petit, le pied de page est toujours situé en bas de la page entière, laissant le reste vide.
<body>
<p class="wrapper">
<!--网页内容-->
<p class="footer_placeholder"></p>
</p>
<p class="footer">
<!--页脚-->
</p>
</body>p.wrapper est le conteneur externe de tout le contenu de la page Web, à l'exception du pied de page, du pied de page p . le pied de page est au même niveau que lui. p.footer_placeholder doit être placé à la fin de tout le contenu de la page Web, c'est-à-dire comme dernier élément enfant de p.wrapper. Sa fonction sera expliquée plus tard. Ensuite, écrivez le CSS et expliquez-le tour à tour. html, body{height:100%;}Lorsque le contenu de la page Web est insuffisant, la hauteur réelle du corps et du HTML peut être inférieure à la plage visible du navigateur, écrivez donc la hauteur de 100 % pour le corps et le HTML. De plus, les éléments enfants directs suivants utiliseront également la méthode d'écriture en pourcentage. La méthode d'écriture en pourcentage doit être valide uniquement lorsque l'élément parent direct a une certaine définition de hauteur. .wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}Tout le contenu Web est dans ce p.wrapper, et la hauteur minimale est définie (IE6 utilise un hack puisque l'élément parent de cet élément est le corps avec 100). % hauteur définie, par conséquent, quelle que soit la quantité de contenu, la hauteur de l'élément p.wrapper occupera toute la plage visible du navigateur. Ensuite, en fonction de la hauteur du pied de page, définissez des valeurs négatives égales pour la marge inférieure, afin que le pied de page apparaisse exactement à la fin du contenu de la page. .footer, .footer_placeholder{height:120px;} /*假定页脚的高度为120px*/p.footer_placeholder, comme littéralement, l'élément placeholder du pied de page, c'est juste un p vide, la hauteur de définition est la même que celle du pied de page, il existe pour donner Le pied de page laisse de la place. Sans cela, quelque chose comme ceci pourrait arriver ↓
html, body{height:100%;}
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
.footer, .footer_placeholder{height:120px;}
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：
body{margin:0;}
.footer_placeholder{clear:both;}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!