[Aprendiendo css2] diseño de cuadrícula: la parte del pie de página de la página se mantiene en la parte inferior de la página web

2024-07-12

Cómo mantener la parte del pie de página de la página en el pie de página (parte inferior) de la página cuando la altura del contenido del medio no es lo suficientemente alta como para que la altura de la pantalla soporte la página.

1. Primero, observe el efecto de visualización en la imagen de arriba.

2. Proporcionar código fuente

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. Todos los códigos


<!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.Reservadomin-height: 100vheste método, pero luego usamosgrid-template-rowsVen al espacio.

2. El truco de este método es utilizar celdas de cuadrícula especiales.fr 。 fr Representa "copias" y su uso requiere que el navegador calcule las "copias" disponibles del espacio restante para asignar a esta columna o fila. En este caso, llena todo el espacio disponible entre el encabezado y el pie de página, lo que también resuelve el "defecto" del enfoque flexbox, donde el área principal no se puede llenar automáticamente.

Compartir tecnología