Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Sticky Footer mit variabler Höhe im Responsive Webdesign? Kein Problem!

Ein Sticky Footer. (Screenshot: Galen Gidman)

Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table löst, zeigen wir hier.

Normalerweise soll der Footer einer Website bei kurzen Inhalten am unteren Ende des Browserfensters kleben. Die passende Lösung dafür lautet „Sticky Footer“. Sie hält den Footer am unteren Browserfenster – ist der Inhalt länger, verhält er sich ganz normal und rutscht aus dem Sichtbereich.

Sticky Footer und Responsive Design? Normalerweise etwas schwierig

Bei den meisten Lösungen für dieses Problem muss der Footer eine feste Höhe besitzen. Das ist beim Responsive Webdesign suboptimal und mit viel Probieren verbunden. Schrittweise wird getestet, wann der Footer andere Höhen braucht. Mit der CSS-Eigenschaft display:table lässt sich dieses Problem der Höhenanpassung elegant und ohne viel Code umgehen. Das HTML-Markup für den Inhalt sieht so aus:

<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [...] Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</footer>

Der Code sollte selbsterklärend sein. Hier jetzt der CSS-Code:

html,
body { height: 100%; }
body {
display: table;
margin:0;
padding:0;
width: 100%;
}
.page-row {
display: table-row;
}
.page-row-expanded { height: 100%; }

Und das war's auch schon. Damit habt ihr eure Site mit einem Sticky Footer ausgestattet, der variabel in der Höhe ist. html und body werden auf die gesamte Höhe ausgebreitet, auch wenn es eigentlich zu wenig Inhalt gibt – soweit unterscheidet es sich nicht von anderen Lösungsmöglichkeiten. Im nächsten Schritt wird mit display:table für den body die Voraussetzung für den Trick geschaffen, der auf display:table-row basiert. Und jetzt wird es spannend:

Die drei horizontalen Inhalts-Level werden durch display:table-row zu Tabellenzeilen. Der Container, der eventuell zu wenig Inhalt für den Footer hat, bekommt über der Klasse .page-row-expanded eine Höhe von 100 Prozent. Und das ist der Trick: Dieser Inhaltscontainer nimmt sich jetzt den verbliebenen Platz der anderen Tabellenzeilen. Der Footer ist damit mindestens am unteren Ende des Viewports. Hier könnt ihr euch eine Demo anschauen.

Sticky Footer mit display:table – Das Beste: Der Browser-Support

Die Eigenschaft display:table ist schon ziemlich alt. Es gibt sie seit HTML 4.01. Dementsprechend gut sieht auch der Browser-Support aus. Es könnte nur Probleme geben, wenn ihr einen Internet Explorer unterstützen möchtet, der älter ist als Version 8. Eine noch kürzere Lösung für einen Sticky Footer mit variabler Höhe ist mit Flexbox möglich, dann allerdings mit schlechterem Browser-Support.

Was haltet ihr von dieser Lösung? Habt ihr vielleicht sogar eine noch bessere?

via galengidman.com

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Florence

Für das Problem, dass padding bei table-row nicht wirkt (http://www.w3.org/TR/CSS2/box.html#padding-properties) gibt es glücklicherweise eine einfache Lösung: padding bei einem Kindelement definieren ...

Florian Brinkmann

Stimmt, da hast du recht. Danke für den Hinweis!

Viele Grüße,
Flo

matthias

danke für den tipp. allerdings solltet ihr erwähnen, dass mit der table-row darstellung viele andere probleme aufgeworfen werden, die man von der "normalen" positionierung nicht kennt. schon einfache dinge wie padding innerhalb dieser bereiche können problematisch werden..

sonst wie immer tip-top :)

lg matthias

PXR

html,body {
margin:0;
padding:0;
height:100%; /* braucht es für die min-height des Containers */
}

div#container {
position:relative; /* braucht es für die Footer Position*/
margin:0 auto; /* Zentriert die Seite (nicht in IE5) */
width:750px;
height:auto !important; /* normale Browser */
height:100%; /* IE6: setzt dies wie min-height um*/
min-height:100%; /* normale Browser */
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* Positioniert dies ganz unten */
}

Viel Spaß!

Jens

Wie wäre es denn mit folgender lösung:

content
footer

------CSS--------

.content {
min-height: 100%;
}
.footer{
height: 100px;
margin-top: -100px;
}

Jupp

Ups, die HTML-Tags wurden automatisch entfernt. Hätte ich ja ahnen können.
Hier mal der zweite Versuch mit runden anstatt spitzen Klammern.

------PHP/HTML------
(body)
(div)
Hier kommt der Haupt-Content hin
(/div)

(?php function printFooter(){ ?)
Hier kommt der Footer-Content hin
(?php } ?)

(div id="footer-dummy")
(?php printFooter(); ?)
(/div)

(footer)
(?php printFooter(); ?)
(/footer)
(/body)

------CSS------
body{
height: 100%;
}
#footer-dummy{
visibility: hidden;
}
footer{
position: absolute;
bottom: 0;
}

Jupp

Ich hab zwar keine bessere Lösung aber ich hab selber eine entwickelt die als einzigen Nachteil Redundanz im Code erzeugt.
Wirklich fatal ist das nicht (obwohl, was bedeutet das für SEO?) aber ich poste sie trotzdem mal.

------PHP/HTML------

Hier kommt der Haupt-Content hin

Hier kommt der Footer-Content hin

------CSS------
body{
height: 100%;
}
#footer-dummy{
visibility: hidden;
}
footer{
position: absolute;
bottom: 0;
}

Das hab ich jetzt so aus dem Gedächtnis geschrieben. Vielleicht fehlt noch ein kleines Detail, aber die Grundidee sollte verständlich sein.
Der Footer-Dummy ist unsichtbar aber beeinflusst immer noch den den Dokumentenfluss, was der eigentliche Footer nicht tut, da er absolut positioniert ist. Deswegen würde der Seiteninhalt aber auch in ihn rein wachsen und hinter ihm verschwinden.
Da beide über PHP mit dem selben Inhalt befüllt werden haben sie exakt die gleiche Höhe, wodurch der Dummy für den eigentlichen Footer genau den Platz frei räumt den er benötigt falls die Seite hoch genug zum scrollen ist.
In der PHP-Funktion wechsel ich direkt nach dem Funktionskopf vom PHP- in den HTML-Modus. Deswegen muss ich nicht alles über echo ausgeben.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst