Fixierter Header mit Flexbox-Verfahren klappt nicht richtig

[Matthias Apsel]

Hallo Detlef Mietke,

Die Angaben

html, body {
  height: 100vh;
}

html, body {
  height: 100%;
}

sind gleichwertig und oft auch unnötig bzw. unsinnig. Denn sie sind meist nur notwendig, um Nachfolgeelementen eine prozentuale Höhe ihres Vorfahrenelements geben zu können. Darauf sollte man aber verzichten, weil die Höhenanpassung ohne weiteres Zutun automatisch nach dem Inhalt erfolgt.

Wird entweder für das html- oder body-Element ein Hintergrund festgelegt, gilt diese Angabe für den kompletten Viewport, das heißt um den Bildschirm komplett mit dem Hintergrund zu füllen, benötigt man die Höhenangaben nicht.

Der Unterschied ist, dass alte Browser die Viewporteinheiten nicht kennen.

Schauen wir uns den Code mal genauer an:

html { height: 100%; }
  /* Genau so hoch wie das Elternelement, das es aber nicht gibt 
     ⇒ so hoch wie der Viewport */
body { height: 100%; }
  /* Genau so hoch wie das Elternelement
     ⇒ so hoch wie das html-Element 
     ⇒ so hoch wie der Viewport */

html { height: 100vh; }
  /* Genau so hoch wie der Viewport
     ⇒ so hoch wie der Viewport */
body { height: 100vh; }
  /* Genau so hoch wie der Viewport
     ⇒ so hoch wie der Viewport */

Bis demnächst
Matthias