Teknologian jakaminen

[Oppiminen css2] ruudukkoasettelu - sivun alatunnisteosa säilyy verkkosivun alaosassa

2024-07-12

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

Kuinka sivun alatunnisteosa pidetään sivun alatunnisteessa (alareunassa), kun keskimmäisen sisällön korkeus ei ole tarpeeksi korkea, jotta näytön korkeus tukisi sivua.

1. Katso ensin näytön tehoste yllä olevassa kuvassa.

2. Anna lähdekoodi

2.1, html-osa

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

2.2, css-osa

  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. Kaikki koodit

  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. Periaate

1.Varattumin-height: 100vhtätä menetelmää, mutta sitten käytämmegrid-template-rowsTule avaruuteen.

2. Tämän menetelmän temppu on käyttää erityisiä ruudukon solujafr 。 fr Edustaa "kopioita", ja sen käyttö edellyttää, että selain laskee käytettävissä olevat "kopiot" tälle sarakkeelle tai riville varattavasta jäljellä olevasta tilasta. Tässä tapauksessa se täyttää kaiken käytettävissä olevan tilan ylä- ja alatunnisteen välissä, mikä myös ratkaisee flexbox-lähestymistavan "virheen", jossa pääaluetta ei voida täyttää automaattisesti.

Henkilökohtainen profiili

Hän on omistautunut teknologian tutkimukselle yli 30 vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne. Hän on tehnyt paljon työtä avoimen lähdekoodin alalla Kehittäjän dokumentaatioasema, jossa voit jakaa joitakin teknologian kehittämisen ongelmia myöhempää käyttöä varten

yhteystietoni

Mail