Fylle gjenværende skjermplass med en Content Div i HTML

Jules David

Tirsdag 16. juli 2024 18:44:03

Optimalisering av oppsett for innhold i full høyde
Å lage en nettapplikasjon som effektivt bruker hele skjermplassen er en vanlig utfordring. Å sikre at innholdet fyller høyden på hele skjermen, spesielt når det er en dynamisk overskrift, krever nøye planlegging og implementering. Overskriften inneholder ofte viktige elementer som logoer og kontoinformasjon, og høyden kan variere.
Målet er å få innholdsdivisjonen til å oppta den gjenværende skjermplassen uten å stole på tabeller. Dette kan være vanskelig, spesielt når elementer i innholdsdivisjonen må tilpasse seg prosentvise høyder. Denne artikkelen utforsker hvordan du oppnår dette oppsettet ved hjelp av moderne CSS-teknikker.

Kommando Beskrivelse

flex-direction: column; Stiller inn flexbeholderens hovedakse til å være vertikal, og stabler barn fra topp til bunn.

flex: 1; Lar flex-elementet vokse og fylle den tilgjengelige plassen i flex-beholderen.

grid-template-rows: auto 1fr; Definerer et rutenettoppsett med to rader, der den første raden har en automatisk høyde og den andre raden tar opp gjenværende plass.

overflow: auto; Aktiverer rulling hvis innholdet flyter over beholderen, og legger til rullefelt etter behov.

height: 100vh; Angir høyden på et element til 100 % av visningsportens høyde.

grid-template-rows Angir størrelsen på hver rad i et rutenettoppsett.

display: flex; Definerer en flex-beholder, som aktiverer flexbox-layoutmodellen for sine barn.

Kommando	Beskrivelse
flex-direction: column;	Stiller inn flexbeholderens hovedakse til å være vertikal, og stabler barn fra topp til bunn.
flex: 1;	Lar flex-elementet vokse og fylle den tilgjengelige plassen i flex-beholderen.
grid-template-rows: auto 1fr;	Definerer et rutenettoppsett med to rader, der den første raden har en automatisk høyde og den andre raden tar opp gjenværende plass.
overflow: auto;	Aktiverer rulling hvis innholdet flyter over beholderen, og legger til rullefelt etter behov.
height: 100vh;	Angir høyden på et element til 100 % av visningsportens høyde.
grid-template-rows	Angir størrelsen på hver rad i et rutenettoppsett.
display: flex;	Definerer en flex-beholder, som aktiverer flexbox-layoutmodellen for sine barn.

Bruke moderne CSS-layout-teknikker

I det første skriptet bruker vi å lage en fyll den gjenværende skjermplassen. De klasse er satt til display: flex og . Dette stabler overskriften og innholdet vertikalt. Overskriften har en fast høyde, mens innholdet bruker for å fylle den gjenværende plassen. Denne tilnærmingen sikrer at innholdsdivisjonen justeres dynamisk for å oppta enhver gjenværende høyde, uavhengig av overskriftens høyde. De egenskapen gjør at innholds-div kan rulles hvis innholdet overskrider det synlige området, og opprettholder en ren layout uten problemer med overløp.

I det andre manuset, er ansatt for oppsettet. De klasse er satt til med grid-template-rows: auto 1fr. Dette skaper et rutenett med to rader: den første raden (overskrift) justerer automatisk høyden, og den andre raden (innhold) fyller den gjenværende plassen. I likhet med Flexbox-eksemplet har innholds-div en egenskap for å håndtere overløpsinnhold elegant. Begge metodene eliminerer behovet for tabeller, og utnytter moderne CSS-layoutteknikker for å oppnå et fleksibelt og responsivt design som justerer seg til varierende overskriftshøyder og sikrer at innholdet fyller resten av siden.

Bruke Flexbox for å lage en Div Fyll gjenværende skjermplass

HTML og CSS ved hjelp av 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>

Bruke CSS Grid for å fylle gjenværende skjermplass

HTML og CSS ved hjelp av Grid Layout

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

Avanserte teknikker for innholdsoppsett i full høyde

En annen effektiv metode for å sikre en fyller den gjenværende skjermplassen bruker enhet i kombinasjon med . De vh enhet representerer en prosentandel av visningsportens høyde, noe som gjør den nyttig for responsive design. Ved å sette høyden på innholdet div til , kan du dynamisk justere høyden basert på topptekstens høyde. Denne tilnærmingen fungerer godt for overskrifter med faste eller kjente høyder, og sikrer at innholds-div alltid fyller den gjenværende plassen. I tillegg bruker enheter bidrar til å opprettholde konsistent layoutadferd på tvers av forskjellige skjermstørrelser.

For mer komplekse oppsett kan JavaScript brukes til å beregne og justere høyden på elementer dynamisk. Ved å knytte hendelseslyttere til vinduets endringshendelse, kan du beregne høyden på innholdsdivisjonen på nytt hver gang vindusstørrelsen endres. Denne metoden gir større fleksibilitet og kan håndtere varierende toppteksthøyder og dynamisk innhold. Å kombinere JavaScript med CSS sikrer at oppsettet ditt forblir responsivt og kan tilpasses forskjellige skjermstørrelser og innholdsendringer, og tilbyr en robust løsning for innholdsdivisjoner i full høyde i webapplikasjoner.

Hvordan kan jeg bruke funksjonen calc() for dynamiske høyder?
De funksjon lar deg utføre beregninger for å bestemme CSS-egenskapsverdier, for eksempel for å gjøre rede for en 50px overskrift.
Hva er vh-enheten i CSS?
De enhet står for viewport høyde, hvor tilsvarer 1 % av visningsportens høyde, noe som gjør den nyttig for responsiv design.
Hvordan håndterer jeg dynamiske toppteksthøyder?
Bruk JavaScript til å måle overskriftens høyde og juster innholds-div-høyden tilsvarende, og sørg for at den fyller den gjenværende plassen dynamisk.
Kan Flexbox og Grid kombineres?
Ja, du kan kombinere og layouter innenfor samme prosjekt for å utnytte styrkene deres for ulike layoutkrav.
Hvordan sikrer jeg rullbarhet i innholdsdivisjonen?
Still inn innholdsdiv eiendom til for å legge til rullefelt når innholdet overskrider div-høyden.
Hva er fordelene med å bruke JavaScript for layoutjusteringer?
JavaScript gir sanntidsjusteringer og fleksibilitet for håndtering av dynamisk innhold og varierende elementstørrelser, noe som forbedrer layoutens respons.
Er det mulig å unngå å bruke tabeller for layout?
Ja, moderne CSS-layoutteknikker som og tilby mer fleksible og responsive løsninger enn tradisjonelle bordbaserte layouter.
Hvordan får jeg en div til å fylle den gjenværende høyden ved å bruke CSS Grid?
Sett rutenettbeholderen til , med den andre raden (innhold) satt til for å fylle den gjenværende høyden.
Hvilken rolle spiller 100vh-enheten i oppsett i full høyde?
De enhet representerer hele høyden på visningsporten, slik at elementer kan skaleres responsivt basert på visningsportens størrelse.
Kan jeg bruke min-høyde for responsive oppsett?
Ja, bruker sikrer at et element opprettholder en minimumshøyde, noe som kan bidra til å administrere innholdsoverflyt og opprettholde layoutkonsistens.

Avslutningsteknikker for oppsett

Ved å utnytte moderne CSS-teknikker som f.eks og , kan webutviklere effektivt lage oppsett der en innholdsdivisjon fyller den gjenværende skjermplassen, og sikrer respons og tilpasningsevne. Disse metodene eliminerer behovet for utdaterte tabellbaserte oppsett og gir mer fleksibilitet i design.

Kombinere CSS-enheter som og fungerer som med JavaScript for dynamiske justeringer kan ytterligere forbedre layoutens respons. Dette sikrer en sømløs brukeropplevelse på tvers av ulike enheter og skjermstørrelser, noe som gjør nettapplikasjonen mer robust og brukervennlig.