Likusios ekrano vietos užpildymas turinio skyriumi HTML

Jules David
2024 m. liepos 16 d., antradienis 18:34:18
CSS

Viso aukščio turinio išdėstymo optimizavimas

Sukurti žiniatinklio programą, kuri efektyviai išnaudotų visą ekrano erdvę, yra dažnas iššūkis. Norint užtikrinti, kad turinys užpildytų viso ekrano aukštį, ypač kai yra dinaminė antraštė, reikia kruopščiai planuoti ir įgyvendinti. Antraštėje dažnai yra esminių elementų, pvz., logotipų ir paskyros informacijos, o jos aukštis gali skirtis.

Tikslas yra, kad turinio skyrius užimtų likusią ekrano vietą, nepasikliaujant lentelėmis. Tai gali būti sudėtinga, ypač kai turinio div elementai turi prisitaikyti prie procentinio aukščio. Šiame straipsnyje nagrinėjama, kaip pasiekti šį išdėstymą naudojant šiuolaikinius CSS metodus.

komandą apibūdinimas
flex-direction: column; Nustato, kad lanksčiojo konteinerio pagrindinė ašis būtų vertikali, sukraunant vaikus iš viršaus į apačią.
flex: 1; Leidžia lanksčiam elementui augti ir užpildyti laisvą erdvę lanksčiame konteineryje.
grid-template-rows: auto 1fr; Apibrėžiamas tinklelio išdėstymas su dviem eilėmis, kai pirmoji eilutė turi automatinį aukštį, o antroji eilutė užima likusią vietą.
overflow: auto; Įgalina slinkimą, jei turinys perpildo sudėtinį rodinį, prireikus prideda slinkties juostų.
height: 100vh; Nustato elemento aukštį į 100 % peržiūros srities aukščio.
grid-template-rows Nurodo kiekvienos tinklelio išdėstymo eilutės dydį.
display: flex; Apibrėžia lanksčią talpyklą, įgalinančią flexbox išdėstymo modelį savo vaikams.

Šiuolaikinių CSS išdėstymo metodų naudojimas

Pirmajame scenarijuje mes naudojame padaryti a užpildykite likusią ekrano vietą. The nustatyta klasė display: flex ir . Tai sukrauna antraštę ir turinį vertikaliai. Antraštės aukštis yra fiksuotas, o naudojamas turinys užpildyti likusią erdvę. Šis metodas užtikrina, kad turinio skirsnis dinamiškai prisitaiko, kad užimtų bet kokį likusį aukštį, neatsižvelgiant į antraštės aukštį. The ypatybė leidžia slinkti turinio div, jei turinys viršija matomą sritį, išlaikant švarų išdėstymą be perpildymo problemų.

Antrajame scenarijuje yra naudojamas maketavimui. The nustatyta klasė su grid-template-rows: auto 1fr. Taip sukuriamas dviejų eilučių tinklelis: pirmoji eilutė (antraštė) automatiškai koreguoja aukštį, o antroji eilutė (turinys) užpildo likusią erdvę. Panašiai kaip „Flexbox“ pavyzdyje, turinio skirsnyje yra savybė grakščiai tvarkyti perpildytą turinį. Abu metodai pašalina lentelių poreikį, pasitelkiant šiuolaikinius CSS išdėstymo metodus, kad būtų pasiektas lankstus ir jautrus dizainas, prisitaikantis prie įvairaus antraštės aukščio ir užtikrinantis, kad turinys užpildytų likusią puslapio dalį.

„Flexbox“ naudojimas norint užpildyti likusią ekrano erdvę

HTML ir CSS naudojant „Flexbox“.

<!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 tinklelio naudojimas likusiai ekrano vietai užpildyti

HTML ir CSS naudojant tinklelio išdėstymą

<!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>

Pažangūs viso aukščio turinio išdėstymo būdai

Kitas veiksmingas būdas užtikrinti a užpildo likusią ekrano erdvę vienetas kartu su . The vh vienetas reiškia peržiūros srities aukščio procentą, todėl jis naudingas reaguojant į dizainą. Nustatydami turinio div aukštį į , galite dinamiškai reguliuoti aukštį pagal antraštės aukštį. Šis metodas puikiai tinka antraštėms su fiksuotu arba žinomu aukščiu, užtikrinant, kad turinio skirsnis visada užpildytų likusią erdvę. Be to, naudojant vienetai padeda išlaikyti nuoseklų išdėstymą skirtinguose ekrano dydžiuose.

Sudėtingesniems išdėstymams galima naudoti „JavaScript“, kad būtų galima dinamiškai apskaičiuoti ir reguliuoti elementų aukštį. Pridėję įvykių klausytojus prie lango dydžio keitimo įvykio, galite perskaičiuoti turinio skirsnio aukštį, kai pasikeičia lango dydis. Šis metodas suteikia daugiau lankstumo ir gali valdyti skirtingą antraštės aukštį bei dinaminį turinį. „JavaScript“ derinimas su CSS užtikrina, kad jūsų išdėstymas išliks jautrus ir prisitaikys prie skirtingų ekrano dydžių ir turinio pokyčių, o tai yra patikimas sprendimas viso aukščio turinio dalijimuisi žiniatinklio programose.

  1. Kaip galiu naudoti funkciją calc() dinaminiams aukščiams?
  2. The funkcija leidžia atlikti skaičiavimus, siekiant nustatyti CSS ypatybių reikšmes, pvz atsižvelgti į 50 pikselių antraštę.
  3. Kas yra vh vienetas CSS?
  4. The vienetas reiškia peržiūros srities aukštį, kur lygus 1 % peržiūros srities aukščio, todėl jis naudingas reaguojant į dizainą.
  5. Kaip tvarkyti dinaminius antraštės aukščius?
  6. Naudokite „JavaScript“, kad išmatuotų antraštės aukštį ir atitinkamai pakoreguokite turinio „div“ aukštį, užtikrindami, kad jis dinamiškai užpildytų likusią erdvę.
  7. Ar galima derinti „Flexbox“ ir „Grid“?
  8. Taip, galima derinti ir maketus tame pačiame projekte, kad būtų galima panaudoti jų stipriąsias puses skirtingiems išdėstymo reikalavimams.
  9. Kaip užtikrinti slenkamumą turinio skyrelyje?
  10. Nustatykite turinio skirsnius nuosavybė į pridėti slinkties juostas, kai turinys viršija div aukštį.
  11. Kokie yra „JavaScript“ naudojimo koreguojant išdėstymą pranašumai?
  12. „JavaScript“ suteikia realiojo laiko koregavimus ir lankstumą tvarkant dinaminį turinį ir įvairius elementų dydžius, taip pagerindama maketo reagavimą.
  13. Ar galima nenaudoti lentelių maketavimui?
  14. Taip, šiuolaikiniai CSS išdėstymo būdai, kaip ir siūlo lankstesnius ir jautresnius sprendimus nei tradiciniai lentelėse pagrįsti maketai.
  15. Kaip padaryti, kad „div“ užpildytų likusį aukštį naudojant CSS tinklelį?
  16. Nustatykite tinklelio talpyklą į , kai antroji eilutė (turinys) nustatytas į užpildyti likusį aukštį.
  17. Kokį vaidmenį atlieka 100vh įrenginys viso aukščio išdėstymuose?
  18. The vienetas reiškia visą peržiūros srities aukštį, leidžiantį elementams keisti mastelį, atsižvelgiant į peržiūros srities dydį.
  19. Ar galiu naudoti minimalų aukštį interaktyviems maketams?
  20. Taip, naudojant užtikrina, kad elementas išlaikytų minimalų aukštį, o tai gali padėti valdyti turinio perpildymą ir išlaikyti išdėstymo nuoseklumą.

Apvyniojimo maketavimo metodai

Naudojant šiuolaikines CSS technologijas, tokias kaip ir , žiniatinklio kūrėjai gali efektyviai kurti išdėstymus, kuriuose turinio div užpildo likusią ekrano vietą, užtikrinant greitą reagavimą ir pritaikomumą. Šie metodai pašalina pasenusių lentelėmis pagrįstų maketų poreikį ir suteikia daugiau lankstumo kuriant.

Derinant CSS vienetus, pvz ir veikia kaip su JavaScript dinaminiam koregavimui gali dar labiau pagerinti maketo reagavimą. Tai užtikrina sklandų naudotojo patirtį įvairiuose įrenginiuose ir skirtingų dydžių ekranuose, todėl žiniatinklio programa tampa patikimesnė ir patogesnė.