kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 Seminar-Termine für 2018 sind online!

Jetzt Tickets 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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

7 Kommentare

  1. Gerald

    Verfasst am 17. Mai 2017 um 9: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 :)

    • Andy

      Verfasst am 17. Juli 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

      • Jonas Hellwig

        Verfasst am 18. Juli 2017 um 8: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

      Verfasst am 18. Juli 2017 um 7: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.

      • Andy

        Verfasst am 18. Juli 2017 um 9: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

        Verfasst am 18. Juli 2017 um 9: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

        Verfasst am 18. Juli 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 verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.