Maison > interface Web > tutoriel CSS > le corps du texte

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

小云云
Libérer: 2017-12-23 13:09:57
original
1982 Les gens l'ont consulté

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>
Copier après la connexion
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;
}
Copier après la connexion
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>
Copier après la connexion


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;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal