Cet article présente principalement deux routines qui expliquent en détail le fond absolu de Sticky Footer. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Le fond absolu, ou Sticky Footer, est un effet de page ancien et classique :
Lorsque le contenu de la page dépasse l'écran, le module de pied de page sera poussé en dessous du contenu comme une page normale, vous il faut faire glisser la barre de défilement pour voir
Lorsque le contenu de la page est plus petit que la hauteur de l'écran, le module de pied de page sera fixé en bas de l'écran, tout comme un positionnement fixe avec une marge inférieure nulle
1. Routine classique
L'idée de cette routine est de fixer une hauteur min : 100. % pour la zone de contenu et modifiez le pied de page Poussez-le vers le bas de l'écran puis ajoutez margin-top au pied de page, dont la valeur est la valeur négative de la hauteur du pied de page, afin que le pied de page puisse revenir en bas de l'écran HTML :<p class="wrap"> <p class="content"> <p>填充内容</p> </p> </p> <p class="footer"> <p>这是页脚</p> </p>
html,body { height: 100%; } body > .wrap { min-height: 100%; } .content { /* padding-bottom 等于 footer 的高度 */ padding-bottom: 60px; } .footer { width: 100%; height: 60px; /* margin-top 为 footer 高度的负值 */ margin-top: -60px; }
2. 🎜>Il faut dire que CSS3 a apporté un changement dans le front-end, et Flexbox a apporté un changement dans la mise en page des pages Web
Même si la compatibilité limite la. promotion de Flexbox en Chine, il est indéniable que Flexbox est une tendance majeure en matière de mise en page front-end
HTML :
<p class="content"> <p>填充内容</p> <hr /> </p> <p class="footer"> <p>这是页脚@WiseWrong</p> </p>
html, body { display: flex; height: 100%; flex-direction: column; } body > .content { flex: 1; }
Ensuite la partie CSS a été réduit avec succès, en utilisant seulement quatre lignes de code, il a résolu le problème qui troublait autrefois une génération
Et grâce à Flexbox, il n'est pas nécessaire de limiter la hauteur du pied de page, ce qui rend la mise en page plus flexible
Bien sûr, les défauts sont également évidents. Seuls les navigateurs IE10 et supérieurs prennent en charge la mise en page flexible
Recommandations associées :
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!