Hinweis

Der Quelltext dieser Datei kann über jeden Browser direkt eingesehen werden. Das komplette CSS befindet sich im head-Bereich, steht also auch direkt im Quelltext.

Beschreibung

Für die Konstruktion sind nur das body-Element und alle direkten Kindelemente des body-Elements entscheidend.

Zunächst steht keins, eins oder mehrere Container-Elemente (wie header, nav, footer, div und so weiter) direkt im body. Dann folgt ein Container-Element mit der Klasse scrollen, zum Beispiel div, main und so weiter. Danach folgen wieder kein, ein oder mehrere Container-Elemente.

Alle Container-Elemente außerhalb des .scrollen-Containers werden fixiert angezeigt. Nur der Inhalt des .scrollen-Containers wird gescrollt.

Durch Flexbox sind keine Höhenangaben erforderlich. Die feststehenden Container passen ihre Höhe dem Inhalt an. Wenn bei schmalen Fenstern der Inhalt dieser Container umbricht und mehr Höhe erfordert wird dies automatisch berücksichtigt. Um das in der Praxis zu testen habe ich in den header extra einen längeren Text gesetzt.

Im Gegensatz zu position: fixed; ist der scrollbare Inhalt also immer komplett sichtbar. Es müssen keine Freiflächen hinter den fixierten Containern durch margin oder padding geschaffen werden, die später bei Inhaltsänderungen zudem immer wieder angepasst werden müssen.

Die entscheidenden CSS-Angaben für eine fensterfüllende Darstellung sind folgende:

   body {
      height: 100vh;
      margin: 0rem;
      display: flex;
      flex-direction: column;
   }
   body>*:not(.scrollen) {
      flex-shrink: 0;
   }
   .scrollen {
      overflow-y: scroll;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
   }
         

That's all.

body und .scrollen sollte klar sein.

Durch

   body>*:not(.scrollen) {
         

werden alle direkten Kindelemente von body außer dem .scrollen-Container angesprochen. Weitere Container wie zum Beispiel das nav-Element, die nicht scrollen sollen, können also direkt eingefügt werden und funktionieren.

Kein Trick - Flexbox.