Sticky Footer mit CSS Flexbox

Die bekannteste Methode, um die Fußzeile einer Website am unteren Rand des Browser-Fensters auszurichten, ist der „Sticky Footer“. Es gibt zwei gängige Varianten und beide haben einen entscheidenen Nachteil: Die Höhe der Fußzeile muss bekannt sein und darf sich nicht verändern.

Bei aufwändigen Fußzeilen mit mehreren Spalten und viel Inhalt ist eine feste Höhe nicht definierbar. Ganz zu schweigen von verschiedenen Layouts für Desktop-, Tablet-Computer und Smartphones. Damit der Sticky Footer zuverlässig funktioniert, muss mit JavaScript die Höhe der Fußzeile beim Seitenaufruf und bei jeder Veränderung der Browser-Fenstergröße ausgelesen und der Wert dem jeweiligen Element via Inline-CSS zugewiesen werden.

Variante 1: Die absolute Positionierung der Fußzeile am unteren Rand

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page {
  min-height: 100%;
  position: relative;
}

.content {
  padding-bottom: 2em;
}

.footer {
  bottom: 0;
  height: 2em;
  left: 0;
  position: absolute;
  width: 100%;
}
<div class="page">
  <div class="header">
    Kopfzeile
  </div>
  <div class="content">
    Inhalt
  </div>
  <div class="footer">
    Fußzeile
  </div>
</div>

Variante 2: Das Verschieben der Fußzeile in den Anzeigebereich

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page {
  min-height: 100%;
}

.content {
  padding-bottom: 2em;
}

.footer {
  height: 2em;
  margin-top: -2em;
}
<div class="page">
  <div class="header">
    Kopfzeile
  </div>
  <div class="content">
    Inhalt
  </div>
</div>
<div class="footer">
  Fußzeile
</div>

Der Heilsbringer: CSS flexbox!

Der CSS Layout-Modus „flexbox“ löst dieses Problem eleganter und mit deutlich weniger Code. Die Unterstützung von flexbox in den Browsern ist bereits sehr hoch: Flexbox-Unterstützung in den Browsern. Bei Website-Besuchern mit älteren Browsern, die flexbox noch nicht beherrschen, wird die Fußzeile immer direkt unter dem letzten Inhaltselement angehangen. Sollte der Inhalt länger sein als das Browser-Fenster hoch ist, fällt es nicht auf, dass die Fußzeile kein Sticky Footer ist. Ist der Inhalt kürzer als die Höhe des Browser-Fensters, entsteht zwischen Fußzeile und unterem Browser-Fenster-Rand eine leere Fläche. Das ist meiner Auffassung nach absolut mit der Philosophie des Progressive Enhancement zu vereinbaren und damit wird jeder Benutzer eines älteren Browsers leben können.

Mein Namensvetter Philip Walton hat in seinem GitHub-Account seine Variante des Flexbox Footers zur Verfügung gestellt und pflegt den Code dort fleißig. Seine Lösung lautet:

/**
* 1. Avoid the IE 10-11 `min-height` bug.
* 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
* letting these items shrink to smaller than their content’s default
* minimum size.
* 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
*/

.page {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1, 3 */
}

.header,
.footer {
  flex: none; /* 2 */
}

.content {
  flex: 1 0 auto; /* 2 */
  padding: 1.5em;
  width: 100%;
}

Der Spielverderber: Microsoft!

Wie immer in der Website-Entwicklung gibt es einen Browser, der eine ganz besondere Überraschung für uns parat hält. Der Internet Explorer. Ich weiß nicht, wie viele Stunden meines Lebens ich bereits für’s Bugfixing im Internet Explorer verloren habe. Es müssen viele sein. Der Internet Explorer (Stand 2015: IE 10 und IE 11) erzeugt in gewissen Situationen und Viewport-Breiten einen großen Abstand zwischen dem letzten Inhaltselement und der Fußzeile. Die Ursache dafür habe ich leider noch nicht herausgefunden. Wer’s weiß, darf mir gerne schreiben und findet Erwähnung in diesem Artikel. ;-)

Dankenswerter Weise unterstützt Microsoft ab dem IE 10 keine conditional comments mehr, sodass wir dem IE 10 und IE 11 kein sauberes Fallback zur Verfügung stellen können. Wir benötigen einen CSS-Hack für den IE 10 und neuer:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    /* Hier können wir die CSS-Eigenschaften von Flexbox überschreiben. */
    .page {
        display: block;
    }
}

In diesem Media Query können wir nun für den Internet Explorer sämtliche Flexbox-Eigenschaften überschreiben. Danke Microsoft!

Philip Isik

Philip kennt alle HTML-/CSS-Spezifikationen und rezitiert daraus fließend. Aus den Kundenwünschen leitet er Lösungen mit Weitblick ab.