Explication détaillée des deux routines du fond absolu de Sticky Footer

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>

CSS :

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;
}

Ce qu'il faut noter, c'est que le remplissage de la zone de contenu, la hauteur et la marge du pied de page doivent être cohérents

La compatibilité de cette méthode d'écriture est très bonne, et elle peut également être affichée normalement. dans IE7 selon le test réel

Mais si la mise en page principale de la page présente d'autres problèmes de compatibilité, Sticky Footer doit apporter quelques modifications correspondantes

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 :

CSS :

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

Par rapport à la routine classique, la première est la partie HTML, le contenu de la zone de contenu n'a plus besoin de conteneur wrap

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 :

Positionnement CSS DIV absolu bottom_html/css_WEB -ITnose

Comment réparer le bas du pied de page

Comment utiliser javascript pour juger la barre de défilement vers le bas, exemple de code, explication détaillée

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!