[Learning css2] layout della griglia: la parte del piè di pagina della pagina viene mantenuta nella parte inferiore della pagina web

2024-07-12

Come mantenere la parte piè di pagina della pagina nel piè di pagina (in basso) della pagina quando l'altezza del contenuto centrale non è abbastanza alta da consentire all'altezza dello schermo di supportare la pagina.

1. Innanzitutto, guarda l'effetto di visualizzazione nell'immagine sopra.

2. Fornire il codice sorgente

2.1, parte html


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

2.2, parte 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. Tutti i codici


<!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. Principio

1.Riservatomin-height: 100vhquesto metodo, ma poi usiamogrid-template-rowsVieni nello spazio.

2. Il trucco con questo metodo è utilizzare celle speciali della grigliafr 。 fr Rappresenta "copie" e il suo utilizzo richiede che il browser calcoli le "copie" disponibili dello spazio rimanente da allocare a questa colonna o riga. In questo caso riempie tutto lo spazio disponibile tra l'intestazione e il piè di pagina, risolvendo anche il "difetto" dell'approccio flexbox, dove l'area principale non può essere riempita automaticamente.

Condivisione della tecnologia