At udfylde resterende skærmplads med en Content Div i HTML

Jules David
Tirsdag den 16. juli 2024 kl. 17.58.06
CSS

Optimering af layouts til indhold i fuld højde

At skabe en webapplikation, der effektivt bruger hele skærmpladsen, er en almindelig udfordring. At sikre, at indholdet fylder hele skærmens højde, især når der er en dynamisk header, kræver omhyggelig planlægning og implementering. Overskriften indeholder ofte væsentlige elementer som logoer og kontooplysninger, og dens højde kan variere.

Målet er at få content div til at optage den resterende skærmplads uden at stole på tabeller. Dette kan være vanskeligt, især når elementer inde i indholds-div skal tilpasse sig procenthøjder. Denne artikel undersøger, hvordan man opnår dette layout ved hjælp af moderne CSS-teknikker.

Kommando Beskrivelse
flex-direction: column; Indstiller flexbeholderens hovedakse til at være lodret, og stabler børn fra top til bund.
flex: 1; Tillader flex-emnet at vokse og fylde den tilgængelige plads i flex-beholderen.
grid-template-rows: auto 1fr; Definerer et gitterlayout med to rækker, hvor den første række har en automatisk højde, og den anden række optager den resterende plads.
overflow: auto; Aktiverer rulning, hvis indholdet flyder over beholderen, tilføjer rullepaneler efter behov.
height: 100vh; Indstiller højden af ​​et element til 100 % af visningsportens højde.
grid-template-rows Angiver størrelsen af ​​hver række i et gitterlayout.
display: flex; Definerer en flex-beholder, der aktiverer flexbox-layoutmodellen for sine børn.

Brug af moderne CSS-layoutteknikker

I det første script bruger vi at lave en udfyld den resterende skærmplads. Det klasse er indstillet til display: flex og . Dette stabler overskriften og indholdet lodret. Headeren har en fast højde, mens indholdet bruger at udfylde den resterende plads. Denne tilgang sikrer, at indholds-div dynamisk justeres for at optage enhver resterende højde, uanset overskriftens højde. Det egenskaben tillader, at indholds-div kan rulles, hvis indholdet overstiger det synlige område, hvilket bevarer et rent layout uden problemer med overløb.

I det andet script, er ansat til layoutet. Det klasse er indstillet til med grid-template-rows: auto 1fr. Dette skaber et gitter med to rækker: den første række (header) justerer automatisk sin højde, og den anden række (indhold) fylder den resterende plads. I lighed med Flexbox-eksemplet har indholds-div en ejendom til at håndtere overløbsindhold elegant. Begge metoder eliminerer behovet for tabeller og udnytter moderne CSS-layoutteknikker for at opnå et fleksibelt og responsivt design, der tilpasser sig forskellige overskriftshøjder og sikrer, at indholdet fylder resten af ​​siden.

Brug af Flexbox til at lave en Div Fyld resterende skærmplads

HTML og CSS ved hjælp af 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>

Brug af CSS Grid til at udfylde resterende skærmplads

HTML og CSS ved hjælp af 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>

Avancerede teknikker til indholdslayouts i fuld højde

En anden effektiv metode til at sikre en udfylder den resterende skærmplads ved hjælp af enhed i kombination med . Det vh enhed repræsenterer en procentdel af visningsportens højde, hvilket gør den nyttig til responsive designs. Ved at indstille højden på indholdet div til , kan du dynamisk justere højden baseret på headerens højde. Denne tilgang fungerer godt for overskrifter med faste eller kendte højder, hvilket sikrer, at indholds-div altid fylder den resterende plads. Derudover bruger enheder hjælper med at opretholde ensartet layoutadfærd på tværs af forskellige skærmstørrelser.

Til mere komplekse layouts kan JavaScript bruges til at beregne og justere højden af ​​elementer dynamisk. Ved at knytte begivenhedslyttere til vinduets resize-begivenhed, kan du genberegne højden af ​​indholds-div, når vinduesstørrelsen ændres. Denne metode giver større fleksibilitet og kan håndtere varierende headerhøjder og dynamisk indhold. Kombination af JavaScript med CSS sikrer, at dit layout forbliver responsivt og kan tilpasses til forskellige skærmstørrelser og indholdsændringer, hvilket tilbyder en robust løsning til indholds-divs i fuld højde i webapplikationer.

  1. Hvordan kan jeg bruge funktionen calc() til dynamiske højder?
  2. Det funktion giver dig mulighed for at udføre beregninger for at bestemme CSS-egenskabsværdier, som f.eks at tage højde for en 50px header.
  3. Hvad er vh-enheden i CSS?
  4. Det enhed står for viewport højde, hvor svarer til 1 % af visningsportens højde, hvilket gør den nyttig til responsivt design.
  5. Hvordan håndterer jeg dynamiske headerhøjder?
  6. Brug JavaScript til at måle overskriftens højde og juster indholds-div'ens højde i overensstemmelse hermed, så du sikrer, at den fylder den resterende plads dynamisk.
  7. Kan Flexbox og Grid kombineres?
  8. Ja, du kan kombinere og layouts inden for det samme projekt for at udnytte deres styrker til forskellige layoutkrav.
  9. Hvordan sikrer jeg rullebarhed i indholdsdiv.
  10. Indstil indholdet div's ejendom til for at tilføje rullepaneler, når indholdet overstiger div'ens højde.
  11. Hvad er fordelene ved at bruge JavaScript til layoutjusteringer?
  12. JavaScript giver justeringer i realtid og fleksibilitet til håndtering af dynamisk indhold og varierende elementstørrelser, hvilket forbedrer layoutets reaktionsevne.
  13. Er det muligt at undgå at bruge tabeller til layout?
  14. Ja, moderne CSS-layoutteknikker som og tilbyde mere fleksible og responsive løsninger end traditionelle bordbaserede layouts.
  15. Hvordan får jeg en div til at fylde den resterende højde ved hjælp af CSS Grid?
  16. Indstil gitterbeholderen til , med den anden række (indhold) indstillet til for at udfylde den resterende højde.
  17. Hvilken rolle spiller 100vh-enheden i layouts i fuld højde?
  18. Det enhed repræsenterer den fulde højde af viewporten, hvilket gør det muligt for elementer at skalere responsivt baseret på viewportens størrelse.
  19. Kan jeg bruge min-højde til responsive layouts?
  20. Ja, bruger sikrer, at et element bevarer en minimumshøjde, hvilket kan hjælpe med at styre indholdsoverløb og opretholde layoutkonsistens.

Indpakning af layoutteknikker

Ved at udnytte moderne CSS-teknikker som f.eks og , kan webudviklere effektivt skabe layouts, hvor en indholds-div udfylder den resterende skærmplads, hvilket sikrer lydhørhed og tilpasningsevne. Disse metoder eliminerer behovet for forældede tabelbaserede layouts og giver mere fleksibilitet i designet.

Kombinere CSS-enheder som og fungerer som med JavaScript til dynamiske justeringer kan yderligere forbedre layoutets reaktionsevne. Dette sikrer en problemfri brugeroplevelse på tværs af forskellige enheder og skærmstørrelser, hvilket gør webapplikationen mere robust og brugervenlig.