[Apprentissage CSS2] disposition en grille - la partie pied de page de la page est conservée au bas de la page Web

Disposition de la grille [Apprentissage CSS2] - la partie pied de page de la page est conservée au bas de la page Web

2024-07-12

Comment conserver la partie pied de page de la page au pied de page (en bas) de la page lorsque la hauteur du contenu central n'est pas suffisamment élevée pour que la hauteur de l'écran puisse supporter la page.

1. Tout d’abord, regardez l’effet d’affichage dans l’image ci-dessus.

2. Fournir le code source

2.1, partie html


<body>
  <header>头部</header>
  <main>主区域</main>
  <footer>底部</footer>
</body>

2.2, partie CSS


<style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    body {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
 
    header {
      background: aquamarine;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
 
    footer {
      background: aquamarine;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
 
    main {
      margin: 0 auto;
      background: aqua;
      width: 80%;
    }
  </style>

3. Tous les codes


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gridbox布局</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    body {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
 
    header {
      background: aquamarine;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
 
    footer {
      background: aquamarine;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
 
    main {
      margin: 0 auto;
      background: aqua;
      width: 80%;
    }
  </style>
</head>
<body>
  <header>头部</header>
  <main>主区域</main>
  <footer>底部</footer>
</body>
</html>

4. Principe

1.Réservémin-height: 100vhcette méthode, mais ensuite nous utilisonsgrid-template-rowsVenez l'espace.

2. L’astuce de cette méthode consiste à utiliser des cellules de grille spécialesfr 。 fr Représente des "copies" et son utilisation nécessite que le navigateur calcule les "copies" disponibles de l'espace restant à allouer à cette colonne ou ligne. Dans ce cas, il remplit tout l'espace disponible entre l'en-tête et le pied de page, ce qui résout également le « défaut » de l'approche flexbox, où la zone principale ne peut pas être remplie automatiquement.

Partage de technologie