Pfannkuchenstapel

Im Gegensatz zum dekonstruierten Pfannkuchen werden die untergeordneten Elemente in diesem Beispiel nicht umschlossen, wenn sich die Bildschirmgröße ändert. Dieses Layout wird allgemein als haftende Fußzeile bezeichnet. Es wird sowohl für Websites als auch für Apps, für mobile Apps (die Fußzeile ist meist eine Symbolleiste) und Websites – insbesondere Single-Page-Anwendungen – verwendet.

Wenn Sie der Komponente display: grid hinzufügen, erhalten Sie ein einspaltiges Raster. Der Hauptbereich ist jedoch nur so hoch wie der Inhalt mit der Fußzeile darunter.

Wenn die Fußzeile unten fixiert werden soll, fügen Sie Folgendes hinzu:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Dadurch wird für den Kopf- und Fußzeileninhalt automatisch die Größe der untergeordneten Elemente übernommen und der verbleibende Platz (1fr) wird auf den Hauptbereich angewendet, während die Zeile mit der Größe auto die Mindestgröße der untergeordneten Elemente einnimmt. Wenn dieser Inhalt vergrößert wird, wird die Zeile selbst entsprechend angepasst.

HTML

<div class="parent">
  <header class="section yellow">Header</header>
  <main class="section blue">Main</main>
  <footer class="section green">Footer Content</footer>
</div>

CSS

        .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* Just for parent demo size */
  height: 100vh;
}