Sticky Footer

Ein Sticky Footer ist ein Muster, bei dem der Footer Ihrer Seite am unteren Rand des Viewports "haften bleibt", wenn der Inhalt kürzer als die Höhe des Viewports ist. In diesem Rezept werden wir ein paar Techniken zur Erstellung eines Sticky Footers betrachten.

Ein Sticky Footer, der an den unteren Rand eines Kastens geschoben wird

Anforderungen

Das Sticky-Footer-Muster muss die folgenden Anforderungen erfüllen:

  • Der Footer bleibt am unteren Rand des Viewports, wenn der Inhalt kurz ist.
  • Wenn der Inhalt der Seite über den unteren Rand des Viewports hinausgeht, befindet sich der Footer wie gewohnt unter dem Inhalt.

Das Rezept

Klicken Sie auf "Play" in den unten stehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

html
<div class="wrapper">
  <header class="page-header">This is the header</header>
  <main class="page-body">
    <p contenteditable>
      Main page content here, add more to this text if you want to see the
      footer push down.
    </p>
  </main>
  <footer class="page-footer">Sticky footer</footer>
</div>
css
* {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  font: 1.2em sans-serif;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-header,
.page-footer {
  background-color: rgb(75 70 74);
  color: #fff;
  padding: 20px;
}

.page-body {
  padding: 20px;
}

.page-body p {
  border: 1px solid grey;
}

Hinweis: In diesem und im folgenden Beispiel verwenden wir einen Wrapper mit min-height: 100%. Sie können dies auch für eine vollständige Seite erreichen, indem Sie eine min-height von 100vh auf dem <body> setzen und es dann als Ihr Grid-Container verwenden.

Getroffene Entscheidungen

Im obigen Beispiel erreichen wir den Sticky Footer durch das CSS Grid Layout. Der .wrapper hat eine Mindesthöhe von 100%, was bedeutet, dass er so hoch ist wie der Container, in dem er sich befindet. Wir erstellen dann ein einspaltiges Grid-Layout mit drei Zeilen, eine Zeile für jeden Teil unseres Layouts.

Die automatische Platzierung durch das Grid wird unsere Elemente in Quellreihenfolge anordnen, sodass der Header in die erste automatisch dimensionierte Spur, der Hauptinhalt in die 1fr Spur und der Footer in die letzte automatisch dimensionierte Spur geht. Die 1fr Spur wird allen verfügbaren Platz einnehmen und so die Lücke füllen.

Alternative Methode

Sie können auch Flexbox verwenden, um einen Sticky Footer zu erstellen.

html
<div class="wrapper">
  <header class="page-header">This is the header</header>
  <main class="page-body">
    <p contenteditable>
      Main page content here, add more to this text if you want to see the
      footer push down.
    </p>
  </main>
  <footer class="page-footer">Sticky footer</footer>
</div>
css
* {
  box-sizing: border-box;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
  font: 1.2em sans-serif;
}

.wrapper {
  box-sizing: border-box;
  min-height: 100%;

  display: flex;
  flex-direction: column;
}

.page-header,
.page-footer {
  background-color: rgb(75 70 74);
  color: #fff;
  padding: 20px;

  flex-grow: 0;
  flex-shrink: 0;
}

.page-body {
  padding: 20px;

  flex-grow: 1;
}

.page-body p {
  border: 1px solid grey;
}

Das Flexbox-Beispiel beginnt auf dieselbe Weise, aber wir verwenden display:flex statt display:grid auf dem .wrapper; wir setzen außerdem flex-direction auf column. Dann setzen wir unseren Hauptinhalt auf flex-grow: 1 und die anderen beiden Elemente auf flex-shrink: 0 — dies verhindert, dass sie kleiner werden, wenn der Inhalt den Hauptbereich füllt.

Ressourcen auf MDN