Compartilhamento de tecnologia

[Aprendendo css2] layout de grade - a parte do rodapé da página é mantida na parte inferior da página da web

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Como manter a parte do rodapé da página no rodapé (parte inferior) da página quando a altura do conteúdo do meio não é alta o suficiente para que a altura da tela suporte a página.

1. Primeiro, observe o efeito de exibição na imagem acima.

2. Forneça o código-fonte

2.1, parte HTML

  1. <body>
  2.   <header>头部</header>
  3.   <main>主区域</main>
  4.   <footer>底部</footer>
  5. </body>

2.2, parte css

  1. <style>
  2.     html, body {
  3.       margin: 0;
  4.       padding: 0;
  5.       width: 100%;
  6.       height: 100%;
  7.     }
  8.     body {
  9.       min-height: 100vh;
  10.       display: grid;
  11.       grid-template-rows: auto 1fr auto;
  12.     }
  13.  
  14.     header {
  15.       background: aquamarine;
  16.       height: 40px;
  17.       line-height: 40px;
  18.       text-align: center;
  19.     }
  20.  
  21.     footer {
  22.       background: aquamarine;
  23.       height: 50px;
  24.       line-height: 50px;
  25.       text-align: center;
  26.     }
  27.  
  28.     main {
  29.       margin: 0 auto;
  30.       background: aqua;
  31.       width: 80%;
  32.     }
  33.   </style>

3. Todos os códigos

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>gridbox布局</title>
  6.   <style>
  7.     html, body {
  8.       margin: 0;
  9.       padding: 0;
  10.       width: 100%;
  11.       height: 100%;
  12.     }
  13.     body {
  14.       min-height: 100vh;
  15.       display: grid;
  16.       grid-template-rows: auto 1fr auto;
  17.     }
  18.  
  19.     header {
  20.       background: aquamarine;
  21.       height: 40px;
  22.       line-height: 40px;
  23.       text-align: center;
  24.     }
  25.  
  26.     footer {
  27.       background: aquamarine;
  28.       height: 50px;
  29.       line-height: 50px;
  30.       text-align: center;
  31.     }
  32.  
  33.     main {
  34.       margin: 0 auto;
  35.       background: aqua;
  36.       width: 80%;
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.   <header>头部</header>
  42.   <main>主区域</main>
  43.   <footer>底部</footer>
  44. </body>
  45. </html>

4. Princípio

1.Reservadomin-height: 100vheste método, mas então usamosgrid-template-rowsVenha espaço.

2. O truque deste método é usar células de grade especiaisfr 。 fr Representa "cópias" e seu uso exige que o navegador calcule as "cópias" disponíveis de espaço restante para alocar a esta coluna ou linha. Neste caso ele preenche todo o espaço disponível entre o cabeçalho e o rodapé, o que também resolve a “falha” da abordagem flexbox, onde a área principal não pode ser preenchida automaticamente.

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência