Ülejäänud ekraaniruumi täitmine HTML-i sisujaotisega

Jules David
Teisipäev, 16. juuli 2024 18:02:51
CSS

Paigutuste optimeerimine täiskõrguse sisu jaoks

Kogu ekraaniruumi tõhusalt kasutava veebirakenduse loomine on tavaline väljakutse. Selle tagamine, et sisu täidaks kogu ekraani kõrguse, eriti dünaamilise päise korral, nõuab hoolikat planeerimist ja rakendamist. Päis sisaldab sageli olulisi elemente, nagu logod ja kontoteave, ning selle kõrgus võib varieeruda.

Eesmärk on panna sisujaotus hõivama ülejäänud ekraaniruumi ilma tabelitele tuginemata. See võib olla keeruline, eriti kui sisu divisjonis olevad elemendid peavad kohanema protsentuaalse kõrgusega. Selles artiklis uuritakse, kuidas seda paigutust kaasaegsete CSS-tehnikate abil saavutada.

Käsk Kirjeldus
flex-direction: column; Määrab painduva konteineri peatelje vertikaalseks, asetades lapsed ülevalt alla.
flex: 1; Võimaldab painduval elemendil kasvada ja täita painduvas mahutis vaba ruumi.
grid-template-rows: auto 1fr; Määrab kahe reaga ruudustiku paigutuse, kus esimesel real on automaatne kõrgus ja teine ​​rida võtab ülejäänud ruumi.
overflow: auto; Lubab kerimise, kui sisu ületab konteineri, lisades vajadusel kerimisribasid.
height: 100vh; Määrab elemendi kõrguseks 100% vaateava kõrgusest.
grid-template-rows Määrab ruudustiku paigutuse iga rea ​​suuruse.
display: flex; Määratleb painduva konteineri, võimaldades oma lastele paindliku kasti paigutuse mudelit.

Kaasaegsete CSS-i paigutustehnikate kasutamine

Esimeses skriptis kasutame teha a täitke ülejäänud ekraaniruum. The klass on seatud display: flex ja . See virnastab päise ja sisu vertikaalselt. Päisel on fikseeritud kõrgus, samas kui sisu kasutab järelejäänud ruumi täitmiseks. See lähenemine tagab, et sisujaotus kohandub dünaamiliselt, et hõivata ülejäänud kõrgus, olenemata päise kõrgusest. The atribuut võimaldab sisu div kerida, kui sisu ületab vaadatava ala, säilitades puhta paigutuse ilma ülevooluprobleemideta.

Teises skriptis kasutatakse paigutuse jaoks. The klass on seatud koos grid-template-rows: auto 1fr. See loob kahe reaga ruudustiku: esimene rida (päis) reguleerib automaatselt oma kõrgust ja teine ​​rida (sisu) täidab ülejäänud ruumi. Sarnaselt Flexboxi näitele on sisudivisjonil omadus ületäituva sisu graatsiliseks käsitlemiseks. Mõlemad meetodid kõrvaldavad vajaduse tabelite järele, kasutades kaasaegseid CSS-i paigutustehnikaid, et saavutada paindlik ja tundlik disain, mis kohandub päise erinevate kõrgustega ja tagab, et sisu täidab ülejäänud lehe.

Flexboxi kasutamine järelejäänud ekraaniruumi täitmiseks

HTML ja CSS Flexboxi abil

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

CSS-ruudustiku kasutamine järelejäänud ekraaniruumi täitmiseks

HTML ja CSS, kasutades ruudustiku paigutust

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

Täiustatud tehnikad täiskõrguse sisu paigutuse jaoks

Teine tõhus meetod tagamaks a täidab järelejäänud ekraaniruumi kasutab üksus koos . The vh ühik esindab protsenti vaateava kõrgusest, mistõttu on see tundliku kujunduse jaoks kasulik. Seades sisu div kõrguseks , saate kõrgust päise kõrguse alusel dünaamiliselt reguleerida. See lähenemisviis sobib hästi fikseeritud või teadaoleva kõrgusega päiste puhul, tagades, et sisujaotus täidab alati ülejäänud ruumi. Lisaks kasutades ühikud aitavad säilitada ühtlast paigutuskäitumist erinevatel ekraanisuurustel.

Keerulisemate paigutuste korral saab elementide kõrguse dünaamiliseks arvutamiseks ja reguleerimiseks kasutada JavaScripti. Akna suuruse muutmise sündmusele sündmuste kuulajate lisamisega saate sisujaotise kõrguse uuesti arvutada, kui akna suurus muutub. See meetod pakub suuremat paindlikkust ja saab hakkama päise erineva kõrguse ja dünaamilise sisuga. JavaScripti kombineerimine CSS-iga tagab, et teie paigutus püsib tundlik ja kohandatav erinevate ekraanisuuruste ja sisumuutustega, pakkudes jõulist lahendust veebirakenduste täiskõrgusega sisu diveerimiseks.

  1. Kuidas saan dünaamiliste kõrguste jaoks funktsiooni calc() kasutada?
  2. The funktsioon võimaldab teha arvutusi CSS-i atribuutide väärtuste määramiseks, nt 50px päise arvessevõtmiseks.
  3. Mis on CSS-i vh-ühik?
  4. The ühik tähistab vaateava kõrgust, kus võrdub 1% vaateava kõrgusest, mistõttu on see tundliku disaini jaoks kasulik.
  5. Kuidas päise dünaamiliste kõrgustega hakkama saada?
  6. Kasutage JavaScripti, et mõõta päise kõrgust ja reguleerida vastavalt sisu divisjoni kõrgust, tagades, et see täidab ülejäänud ruumi dünaamiliselt.
  7. Kas Flexboxi ja Gridi saab kombineerida?
  8. Jah, saate kombineerida ja paigutusi sama projekti raames, et kasutada nende tugevaid külgi erinevate paigutusnõuete jaoks.
  9. Kuidas tagada keritavus sisu divisjonis?
  10. Määrake sisu divisjonid vara juurde kerimisribade lisamiseks, kui sisu ületab div kõrguse.
  11. Millised on JavaScripti kasutamise eelised paigutuse kohandamiseks?
  12. JavaScript pakub reaalajas kohandusi ja paindlikkust dünaamilise sisu ja elementide suuruse muutmiseks, parandades paigutuse reageerimisvõimet.
  13. Kas on võimalik vältida tabelite kasutamist küljendamiseks?
  14. Jah, kaasaegsed CSS-i paigutustehnikad nagu ja pakkuda paindlikumaid ja tundlikumaid lahendusi kui traditsioonilised tabelipõhised paigutused.
  15. Kuidas panna div CSS-ruudustiku abil ülejäänud kõrgust täitma?
  16. Seadke ruudukonteiner asendisse , teise rea (sisu) väärtuseks on määratud ülejäänud kõrguse täitmiseks.
  17. Millist rolli mängib 100vh seade täiskõrguses paigutuses?
  18. The ühik tähistab vaateava kogu kõrgust, võimaldades elemente vastavalt vaateava suurusele skaleerida.
  19. Kas ma saan kasutada tundlike paigutuste jaoks minimaalset kõrgust?
  20. Jah, kasutades tagab elemendi minimaalse kõrguse, mis aitab hallata sisu ületäitumist ja säilitada paigutuse järjepidevust.

Paigutustehnikate kokkuvõte

Kasutades kaasaegseid CSS-i tehnikaid nagu ja , saavad veebiarendajad tõhusalt luua paigutusi, kus sisujaotus täidab ülejäänud ekraaniruumi, tagades reageerimisvõime ja kohanemisvõime. Need meetodid välistavad vajaduse vananenud tabelipõhiste paigutuste järele ja pakuvad disainis suuremat paindlikkust.

CSS-i üksuste kombineerimine nagu ja funktsioneerib nagu dünaamiliste kohanduste jaoks mõeldud JavaScriptiga saab paigutuse reageerimisvõimet veelgi parandada. See tagab sujuva kasutuskogemuse erinevates seadmetes ja ekraanisuuruses, muutes veebirakenduse töökindlamaks ja kasutajasõbralikumaks.