当前位置：网站首页>Pied de page fixe

Pied de page fixe

2022-07-20 13:24:00 【51CTO】

.Supposons que notre page se compose de trois parties：En - tête、Contenu principal et pied de page.Quel que soit le contenu principal,Le pied de page est toujours affiché en bas est une disposition commune.

      
      

       
       <div class="container">
       
       
  <header></header>
       
       
  <main></main>
       
       
  <footer></footer>
       
       
</div>
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    •

Style de base：

      
      

       
       html, body, .container {
       
       
  height: 100%;
       
       
}
       
       

       
       
body {
       
       
  margin: 0;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    •

Utiliser ​​margin​​

  • Dans la zone de contenu​​margin-bottom​​ Est négatif
      
      

       
       .content {
       
       
  min-height: 100%;
       
       
  margin-bottom: -50px;
       
       
}
       
       

       
       
.footer {
       
       
  height: 50px;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    •
  • Pied de page​​margin-top​​ Est une taille de hauteur négative
      
      

       
       main {
       
       
  min-height: 100%;
       
       
}
       
       

       
       
footer {
       
       
  height: 50px;
       
       
  margin-top: -50px;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    •

Utiliser ​​calc()​​ 

      
      

       
       main {
       
       
  min-height: calc(100% - 50px);
       
       
}
       
       

       
       
footer {
       
       
  height: 50px;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    •

Utiliser ​​flex​​

Utiliser CSS ​​flex​​, La mise en page est réalisée comme suit: ：

      
      

       
       .container {
       
       
  display: flex;
       
       
  flex-direction: column;
       
       
}
       
       

       
       
main {
       
       
  flex-grow: 1
       
       
  /* flex: 1 0 auto; */
       
       
}
       
       

       
       
footer {
       
       
  flex-shrink: 0;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    • 
       
       
  • 9.
    • 
       
       
  • 10.
    • 
       
       
  • 11.
    • 
       
       
  • 12.
    • 
       
       
  • 13.
    •

Paramètres ​​flex-grow: 1​​ Pour le contenu principal, il prendra de l'espace libre .

Ou utiliser ​​margin: auto​​：

      
      

       
       .container {
       
       
  display: flex;
       
       
  flex-direction: column;
       
       
}
       
       

       
       
footer {
       
       
  margin-top: auto;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    •

Utiliser ​​grid​​ 

      
      

       
       .container {
       
       
  display: grid;
       
       
  min-height: 100%;
       
       
  grid-template-rows: auto 1fr auto;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    •

​ ​Voir les effets​​

sticky

      
      

       
       footer {
       
       
  position: sticky;
       
       
  top: 100vh;
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    •

Plus d'informations

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190932599518.html

边栏推荐

猜你喜欢

随机推荐