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.

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.

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.

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

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

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 12 Kommentare

  1. Elmar
    schrieb am 27.12.2020 um 10:09 Uhr:

    Hallo zusammen
    Es existiert auch diese Flexbox-Lösung:
    Im Body den Eintrag:
    min-height: 100vh;
    Im Main-Element die Zeilen:
    min-height: 5em;
    flex: 1;

    Antworten
  2. Wolfgang
    schrieb am 26.07.2020 um 14:55 Uhr:

    Funktioniert leider nicht mit dem IE11.

    Antworten
    • Jonas Hellwig
      schrieb am 27.07.2020 um 14:54 Uhr:

      Die Grid-Variante nicht. Mit Table funktioniert es auf jeden Fall.

      Antworten
  3. Sascha Kleiber
    schrieb am 15.01.2020 um 08:20 Uhr:

    Hallo,

    der „Responsive Sticky Footer mit dem »CSS Grid Layout«“ funktioniert aber nicht mit dem IE11… Schade.

    Antworten
  4. 19 hilfreiche Webdesign-Blogs & -Podcasts zur Weiterbildung - Webdesign Journal
    schrieb am 25.03.2018 um 09:06 Uhr:

    […] kulturbanause-Artikel SVG-Grafiken in Websites/HTML-Seiten einbinden Responsive Sticky Footer WordPress-Theme um Logo-Upload-Funktion (Custom Logo) […]

    Antworten
  5. Gerald
    schrieb am 17.05.2017 um 09:48 Uhr:

    Super Artikel! Tolle Darstellung der verschiedenen Möglichkeiten! War neugierig wie das Scrollverhalten bei viel Inhalt im main-Bereich ist; da „bricht“ die Sticky-Lösung letztendlich.

    body { overflow-y: hidden; } sowie
    main { overflow-y: auto; }

    sollten hier dabei helfen in Webapps nur den Content zu scrollen und header/footer dort zu lassen, wo sie sein sollten :)

    Antworten
    • Andy
      schrieb am 17.07.2017 um 11:36 Uhr:

      Hallo Gerald,

      ich habe eine Testseite angelegt auf der es (glaube ich) zu dem von dir beschriebenen Problem kommt aber ich sitze seit 4 Tagen und finde nicht heraus, warum. Kannst du mir einen Tipp geben?

      Auf den Seiten, auf denen ein Scrollen notwendig ist (Scrollbalken immer zu sehen: „html {overflow-y: scroll;}“) verändert sich die Höhe von header (vielleicht auch main?) um ein paar Pixel und ich finde keinen Grund dafür und demnach kann ich es auch nicht „abschalten“.

      Wenn ich die von dir vorgeschlagenen Änderungen eintrage, besteht das Problem mit der Höhe von header/main nicht mehr aber die Scroll-Balken sind nicht wirklich ein optisches Highlight und somit keine Option (für mich).

      Kannst du mir erklären warum?
      Ich habe gelesen, was „overflow: hidden/auto“ bewirken soll aber ich habe aktuell keine Vorstellung WAS GENAU (Element?) da zu groß ist, um die Verschiebung der Bereiche zu verursachen.

      Es grüßt (nervlich am Ende)
      der Andy

      Antworten
      • Jonas Hellwig
        schrieb am 18.07.2017 um 08:04 Uhr:

        Hallo Andy, verändert sich die Höhe oder die Breite des Headers? Die Höhe kann ich mir spontan auch nicht erklären. Wenn es doch die Breite sein sollte, stellt sich die Frage ob es etwa 20 Pixel sind. Dann lässt es auf den Scrollbalken schließen.

    • Jonas Hellwig
      schrieb am 18.07.2017 um 07:56 Uhr:

      Hallo Gerald, die Sticky-Funktion zeichnet sich ja gerade dadurch aus, dass der Footer unten klebt, wenn wenig Inhalte vorhanden sind. Wenn es viele Inhalte gibt befindet er sich außerhalb des Viewports. Was du als Fehler beschreibst ist genau das entscheidende Feature dieser Lösung. Ich glaube du möchtest eher einen »Fixed Footer« – zumindest führt dein Code zu einem solchen.

      Antworten
      • Andy
        schrieb am 18.07.2017 um 09:02 Uhr:

        Hallo Jonas,

        es ist die Höhe. :-(
        Ich hab grad nochmal getestet – das Problem tritt nicht auf, wenn ich die 100%-Höhe des html-Tags deaktiviere. Allerdings ist dann auch der Footer nicht mehr „sticky“ und rutscht auf „kurzen“ Seiten nach oben.
        Man siehts auf http://www.boxes.fail – auf großen Bildschirmen (Footer ist beim Aufruf der Seite sichtbar) unterscheidet sich auf der Startseite (und den 3 „kurzen“ Bereichsseiten) der Abstand vom Header-Bild zum unteren Header-Rand im Vergleich zu Seiten mit „Überlänge, wie der Seite zu „Menüpunkt B“ oder dem „Impressum“.

        Falls jemand noch eine Idee hat – ich bin grad in einem Ideen-Loop…

      • Jonas Hellwig
        schrieb am 18.07.2017 um 09:33 Uhr:

        Ah – okay. Verstanden :) Du kannst dein Problem auf verschiedene Arten lösen: Entweder du gibst dem Header anstelle von height:500px eine min-height:500px oder du gibst dem Body anstelle von height:100% die Eigenschaft min-height:100%.

        Funktioniert das?

      • Andy
        schrieb am 18.07.2017 um 10:09 Uhr:

        Es ist verrückt! Beides geht… :-D

        Allerdings bin ich grad überfordert, was da genau passiert – würde es aber trotzdem gern verstehen. Kannst du mir noch kurz erklären, was da genau passiert ist? Warum die Layoutverschiebung?

        In allen Tutorials zum Flexbox-Sticky-Footer haben und immer 100% – warum macht es hier Sinn, eine Mindesthöhe einzutragen?

        …hab grad mal weitergetestet – auch, wenn ich 50% beim Header eintrage funktioniert es. Entsteht der Fehler wegen der (unflexiblen) Pixelangabe?

        Riesendank!!!

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →