Responsive Sticky Footer
Von: Jonas Ein Sticky-Footer klebt immer unten am Seitenende, es sei denn der Inhalt ist länger als der Bildschirm. Im Responsive Design verkompliziert sich das Konzept, da der Footer unterschiedlich hoch werden kann. Mit Flexbox, Grid und display: table kann das Layout umgesetzt werden.
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.
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 */
}Ä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%;
}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;
}Responsive Sticky Footer mit CSS Grid
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;
}
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;
Funktioniert leider nicht mit dem IE11.
Die Grid-Variante nicht. Mit Table funktioniert es auf jeden Fall.
Hallo,
der „Responsive Sticky Footer mit dem »CSS Grid Layout«“ funktioniert aber nicht mit dem IE11… Schade.
[…] kulturbanause-Artikel SVG-Grafiken in Websites/HTML-Seiten einbinden Responsive Sticky Footer WordPress-Theme um Logo-Upload-Funktion (Custom Logo) […]
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 :)
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
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.
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.
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…
Ah – okay. Verstanden :) Du kannst dein Problem auf verschiedene Arten lösen: Entweder du gibst dem Header anstelle von
height:500pxeinemin-height:500pxoder du gibst dem Body anstelle vonheight:100%die Eigenschaftmin-height:100%.Funktioniert das?
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!!!