Wie füllt man einen Div mit der restlichen Bildschirmhöhe aus?

Flexbox für Layoutkontrolle

Flexbox ist ein CSS-Layoutmodell, das hilft, Platz zu verteilen und Inhalte in einem Container auszurichten. Es ist nützlich für die Erstellung von Layouts, die sich an verschiedene Bildschirmgrößen und Inhaltsmengen anpassen.

Flexbox hilft, das Problem der verbleibenden Höhe zu lösen, indem es:

• Inhalte vertikal zentriert
• Platz zwischen oder um Elemente verteilt
• Kinderelemente flexibel dimensioniert
• Die visuelle Reihenfolge der Elemente ändert

Die meisten modernen Webbrowser unterstützen Flexbox, einschließlich Chrome, Firefox, Safari und Edge. Internet Explorer 11 hat teilweise Unterstützung, während ältere Versionen es nicht unterstützen. Für ältere Browser müssen Sie möglicherweise andere Methoden verwenden oder Polyfills einbinden.

Um Flexbox zu verwenden, wenden Sie display: flex auf den übergeordneten Container an. Dies aktiviert den Flex-Kontext für alle seine direkten Kinder. Sie können dann Flex-Eigenschaften verwenden, um zu steuern, wie sich diese Kindelemente innerhalb des Flex-Containers verhalten.

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

.content {
  width: 100%;
}

Aufbau der HTML-Struktur

Um ein Layout zu erstellen, bei dem ein div die verbleibende Bildschirmhöhe ausfüllt, benötigen Sie eine einfache HTML-Struktur. Hier ist ein grundlegender Aufbau:

<div class="container">
  <header class="header">Kopfzeilen-Inhalt</header>
  <main class="main-content">Hauptinhalt</main>
  <footer class="footer">Fußzeilen-Inhalt</footer>
</div>

Diese Struktur umfasst einen Container-div, der drei Hauptelemente enthält: eine Kopfzeile, einen Hauptinhaltsbereich und eine Fußzeile. Der main-content div wird die verbleibende Bildschirmhöhe ausfüllen.

<main class="main-content">
  <nav>Navigationsmenü</nav>
  <article>Hauptartikelinhalt</article>
  <aside>Seitenleisteninhalt</aside>
</main>

Anwendung der Flexbox CSS-Eigenschaften

Um dieses Layout mit Flexbox umzusetzen, wenden Sie diese CSS-Eigenschaften an:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
}

Hier sind die wichtigsten Flexbox-Eigenschaften:

1. display: flex; am Container aktiviert das Flexbox-Layout.
2. flex-direction: column; stapelt die Kindelemente vertikal.
3. min-height: 100vh; lässt den Container mindestens die volle Viewport-Höhe einnehmen.
4. flex-shrink: 0; an Kopf- und Fußzeile verhindert, dass diese schrumpfen.
5. flex-grow: 1; am Hauptinhalt erlaubt diesem, zu wachsen und den verbleibenden Platz auszufüllen.

Diese CSS-Struktur erzeugt ein flexibles Layout, bei dem der Hauptinhaltsbereich sich ausdehnt, um den verfügbaren Platz zwischen Kopf- und Fußzeile auszufüllen, unabhängig von deren Größen oder der Menge des Inhalts.

Verwendung von CSS Grid für Layouts mit voller Höhe

CSS Grid ist ein Layoutsystem, das Layouts mit voller Höhe erstellen kann. Es ermöglicht die Definition von Zeilen und Spalten und gibt Ihnen Kontrolle über zweidimensionale Layouts.

So verwenden Sie CSS Grid für ein Layout mit voller Höhe:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header, footer {
  grid-row: span 1;
}

main {
  grid-row: 2 / 3;
}

Dieses CSS erstellt ein dreizeiliges Layout, bei dem die mittlere Zeile (Hauptinhalt) den verfügbaren Platz ausfüllt.

CSS Grid im Vergleich zu Flexbox:

• Bietet mehr Kontrolle über horizontale und vertikale Ausrichtung
• Eignet sich gut für Layouts mit mehreren Zeilen und Spalten
• Hat weniger Browserunterstützung als Flexbox

body {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 3fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

JavaScript-basierte Lösungen

Obwohl CSS-Lösungen oft besser sind, kann JavaScript auch Layouts mit voller Höhe erstellen:

function adjustHeight() {
  const header = document.querySelector('header').offsetHeight;
  const footer = document.querySelector('footer').offsetHeight;
  const windowHeight = window.innerHeight;
  const main = document.querySelector('main');
  main.style.height = `${windowHeight - header - footer}px`;
}

window.addEventListener('resize', adjustHeight);
adjustHeight();

Dieses Skript berechnet den verfügbaren Platz und legt die Höhe des Hauptinhalts fest.

Vorteile der Verwendung von JavaScript:

• Funktioniert in älteren Browsern, die modernes CSS nicht unterstützen
• Ermöglicht Änderungen basierend auf Inhalt oder Benutzeraktionen

Nachteile der Verwendung von JavaScript:

• Kann zu Layoutverschiebungen führen, wenn nicht gut gehandhabt
• Erhöht die Komplexität des Codes
• Kann die Leistung beeinträchtigen, besonders auf langsameren Geräten