Responsive Sticky Footer

Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Frühbucher-Preise sichern

Sticky Footer mit fester Höhe

Ein Sticky Footer mit fester Höhe ist sehr einfach umzusetzen: Dem Hauptinhalt erhält unten soviel Innenabstand, wie der Footer hoch ist. Anschließend verschiebt man den Footer um den negativen Wert seiner Höhe nach oben.

<!-- relevanter HTML-Code -->

<div class="site">
  <header></header>
  <main></main>
</div>

<footer></footer>
/* relevanter CSS-Code */

html, body {
 height: 100%;
}

.site {
 height: auto; 
 min-height: 100%;
}

main {
 padding-bottom:50px; /* Höhe des Footers */
} 

footer {
 height:50px;
 margin-top: -50px; /* Höhe des Footers */
}

Beispiel anschauen

Ändert sich die Höhe des Footers, versagen viele bekannte Lösungen inkl. der soeben gezeigten. Die folgenden Beispiele ermöglichen einen responsiven Sticky Footer mit flexibler Höhe.

Responsive Sticky Footer mit dem »CSS Table Layout«

Die Umsetzung eines »Sticky Footers« mit dem CSS Table Layout hat den großen Vorteil, dass diese Methode einen sehr hohen Browsersupport aufweist. Alle relevanten Browser bis hin zum Internet Explorer 8 können bei Verwendung dieser Technik abgedeckt werden.

Grundvoraussetzung für die Lösung ist, dass sowohl das <html>-Element sowie das <body>-Element eine Höhe von 100% besitzen. Dem <body> werden nun zusätzlich die Angaben width: 100%; display: table; und table-layout: fixed; zugewiesen. Hierdurch verhält sich der <body> wie eine HTML-Tabelle, die sich über die gesamte Breite des Viewports ausdehnt. Mit der Angabe table-layout: fixed; beugen wir einigen Fehldarstellungen vor, die durch das spätere Einpflegen von verschiedenen Inhalten im Inhaltsbereich auftreten könnten.

Im letzten Schritt bekommen alle zu berücksichtigenden Elemente die Angabe display: table-row;. Im Code-Beispiel handelt es sich bei diesem Elementen um das <header>-, <footer>- und <main>-Element. Alle Elemente haben eine flexible Höhe. Sollte der Inhalt die Seite nicht komplett ausfüllen, soll das <main>-Element soweit ausgedehnt werden, dass der Footer am unteren Rand des Viewports endet. Hierzu geben wir dem <main>-Element zusätzlich noch eine Höhe von 100%.

<!-- relevanter HTML-Code -->

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
/* relevanter CSS-Code */

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: table;
  table-layout: fixed;
}

header,
footer {
  display: table-row;
}

main {
  display: table-row;
  height: 100%;
}

Beispiel anschauen

Einen kleinen Nachteil gibt es bei dieser Technik jedoch auch. Durch die Angabe von display: table-row; können Elemente nicht mehr mit margin und padding ausgestattet werden. Abstände müssen demnach über die jeweiligen Kindelemente realisiert werden.

Responsive Sticky Footer mit Flexbox

Wie auch schon beim Tabellen Layout ist die Höhenangebe von 100% beim <html>- und <body>-Element Grundvoraussetzung. Mit display: flex; aktiviert ihr das Flexbox-Modell für den <body> und seine direkten Kindelemente und mit flex-direktion: column; ordnet ihr die Elemente untereinander an.
Anschließend sagt ihr dem <main>-Element mit flex: 1;, dass es sich über den kompletten verfügbaren Bereich ausdehnen soll.

Das Flexbox-Modell hat einen sehr guten Browsersupport und funktioniert in allen modernen Browsern. Im Vergleich zur Umsetzung mit dem Tabellen Layout spart ihr hier einige Zeilen Code und könnt Abstände mit margin und padding direkt auf die Elemente anwenden. Wollt ihr eure Website jedoch auch für ältere Versionen des Internet Explorers optimieren, stoßt ihr hier auf Probleme.

<!-- relevanter HTML-Code -->

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
/* relevanter CSS-Code */

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

Beispiel anschauen

Responsive Sticky Footer mit dem »CSS Grid Layout«

Die Grundvoraussetzung ist auch hier, dass das <html>- und das <body>-Element eine Höhe von 100% erhalten. Nun wird mit der Angabe display: grid; das CSS Grid-Layout aktiviert.
Über grid-template-row: auto 1fr auto; wird den einzelnen Grid-Zeilen (im Beispiel sind das <header>, <main> und <footer>) eine Höhe zugewiesen. Der Wert auto entspricht dem Inhalt des Elements. 1fr füllt den anschließend noch verbliebenen Platz auf.

<!-- relevanter HTML-Code -->

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

 

html {
  height: 100%;
}

body {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Beispiel anschauen

Links / Quellen