Wie macht man ein Div so hoch wie das Browserfenster?

Leon A. -

Problem: Einstellen eines div auf volle Browserhöhe

Ein div zu erstellen, das die gesamte Höhe des Browserfensters abdeckt, kann knifflig sein. Normale CSS-Höheneigenschaften funktionieren oft nicht gut, da sie sich nicht an unterschiedliche Viewport-Größen auf verschiedenen Geräten und Bildschirmauflösungen anpassen.

CSS-Lösung: Viewport-Höheneinheiten

Einführung in Viewport-Prozentlängen

CSS3 führte Viewport-Prozentlängen ein, die relative Einheiten zur Viewport-Größe sind. Die Viewport-Höheneinheit (vh) hilft dabei, Elemente mit voller Höhe zu erstellen. Ein vh entspricht 1% der Viewport-Höhe, sodass 100vh die gesamte Höhe des Browserfensters darstellt.

Im Gegensatz zu Prozentwerten basieren vh-Einheiten auf der Viewport-Größe und nicht auf dem übergeordneten Element. Dies macht sie zuverlässig für die Erstellung von Layouts mit voller Höhe auf verschiedenen Geräten und Bildschirmgrößen.

Tipp: Kombination von vh mit anderen Einheiten

Für eine präzisere Kontrolle können Sie vh mit anderen Einheiten kombinieren. Zum Beispiel erstellt 'calc(100vh - 50px)' ein Element, das die volle Viewport-Höhe minus 50 Pixel hat, was nützlich für Layouts mit Kopf- oder Fußzeilen fester Höhe ist.

Implementierung von 100vh für Divs mit voller Höhe

Um ein Div mit voller Höhe unter Verwendung von Viewport-Einheiten zu erstellen, verwenden Sie dieses CSS:

.full-height {
  height: 100vh;
}

Dieser Code lässt das Div sich über die gesamte Höhe des Browserfensters erstrecken, unabhängig von seiner Position im Dokument.

Viewport-Einheiten bieten Vorteile für responsives Design:

  • Die Höhe des Divs ändert sich, wenn das Browserfenster in der Größe verändert wird.
  • Es funktioniert auf verschiedenen Geräten und Bildschirmgrößen.
  • Keine komplexen Berechnungen oder JavaScript sind für Layouts mit voller Höhe erforderlich.

Alternative Lösungen

JavaScript für dynamische Höhenanpassung

JavaScript bietet eine weitere Möglichkeit, die Div-Höhe dynamisch anzupassen. Diese Methode misst die Fensterhöhe und legt die Höhe des Divs entsprechend fest. Hier ein Beispiel:

function setDivHeight() {
  var windowHeight = window.innerHeight;
  document.getElementById('myDiv').style.height = windowHeight + 'px';
}

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

Dieser Ansatz hat einige Vorteile:

  • Er funktioniert in älteren Browsern, die keine Viewport-Einheiten unterstützen.
  • Er ermöglicht komplexere Berechnungen, falls nötig.

Es gibt jedoch auch einige Nachteile:

  • JavaScript muss aktiviert sein.
  • Es kann zu Layout-Verschiebungen kommen, wenn JavaScript langsam lädt.
  • Im Vergleich zur CSS-Lösung ist mehr Code zu pflegen.

Tipp: Debounce für bessere Leistung

Um die Leistung bei der Verwendung des Resize-Event-Listeners zu verbessern, sollten Sie eine Debounce-Funktion implementieren. Dies verhindert, dass die setDivHeight-Funktion während schneller Fenstergrößenänderungen zu häufig aufgerufen wird:

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

window.addEventListener('resize', debounce(setDivHeight, 250));

Flexbox-Layout für Spalten mit voller Höhe

Flexbox ist ein CSS-Layout-Modell, das das Problem der vollen Höhe lösen kann. Es bietet eine Möglichkeit, flexible Container-Elemente zu erstellen. So verwenden Sie Flexbox für Spalten mit voller Höhe:

body {
  display: flex;
  min-height: 100vh;
}

.column {
  flex: 1;
}

Diese Methode bietet mehrere Vorteile:

  • Sie erzeugt Spalten mit gleicher Höhe.
  • Sie ermöglicht die vertikale Zentrierung von Inhalten.
  • Sie ist responsiv und passt sich verschiedenen Bildschirmgrößen an.

Flexbox löst das Problem der vollen Höhe, indem der übergeordnete Container die volle Viewport-Höhe einnimmt und die untergeordneten Elemente dann wachsen und diesen Raum ausfüllen können. Dieser Ansatz ist nützlich für Layouts mit mehreren Spalten oder komplexen Strukturen.