Sticky Footer La méthode du bas absolu

Cette fois, je vais vous présenter la méthode pour atteindre le fond absolu du Sticky Footer. Quelles sont les précautions pour atteindre le fond absolu du Sticky Footer. Voici un cas pratique, jetons un oeil.

J'ai récemment interviewé plusieurs front-ends, avec différents degrés d'expérience professionnelle. Je ne sais même pas quel est le résultat absolu, et personne ne peut me dire comment y parvenir. Cela ne m'empêche pas de penser qu'il y a un mélange de bons et de mauvais dans le domaine du front-end

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é sous le contenu comme une page normale. Faites 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é au niveau de l'écran. en bas de l'écran, tout comme un positionnement fixe avec une marge inférieure nulle

Routine Classique

L'idée de cette routine est de définir la zone de contenu

hauteur min : 100 %, pousser le pied de page vers le bas de l'écran

puis ajouter

marge- 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 le remplissage de la zone de contenu, la hauteur et la marge du pied de page, qui doivent être cohérents

Ceci La compatibilité de la méthode d'écriture est très bonne , et il peut également être affiché 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. Flexbox

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

Bien que la compatibilité ait limité la promotion de Flexbox en Chine, il est indéniable que Flexbox est une tendance majeure en matière de mise en page frontale

HTML :

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

CSS :

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
body > .content {
  flex: 1;
}

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

Ensuite la partie CSS a réussi à perdre du poids, en utilisant seulement quatre lignes de code , il a résolu le problème qui troublait autrefois toute 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 inconvénients sont également évidents. Seuls les navigateurs IE10 et supérieurs prennent en charge la mise en page flexible

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Css pur pour obtenir un effet de mur de photos 3D

Css pour dessiner un motif d'éventail

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!