Technology sharing

[Cognitio css2] propositum eget, pars footer paginae in ima paginae conservatur

2024-07-12

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

Quomodo partem pedis paginae ad footer (imo) paginae custodiret cum mediae contenti altitudo non satis alta est pro tegumentum altitudinis ad paginam sustinendam.

1. Primum, vide effectum in pictura supra ostensionis.

2. videte fontem codice

2.1, html part

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

2.2, 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. Omnes codes

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

1.Reservedmin-height: 100vhhoc modo, sed tunc utimurgrid-template-rowsAge spatium.

2. Dolum cum hac methodo adhibet cellulis specialibus egetfr 。 fr Repraesentat "copias" et usus eius requirit ut navigatrum ad calculandum praesto "copiae" spatium reliquorum huic columnae vel ordinis placeat. Hoc in casu totum spatium praesto inter caput et footer implet, quod etiam "vitium" accessus flexae solvit, ubi area principalis automatice impleri non potest.

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones in technologia progressus ad futuram referentiam.

mihi contactus notitia

Mail