tricky sticky Footer

Bei der Arbeit am Portfolio, zeigte sich ein nerviges, altes und immer ignoriertes Problem. Der Footer dieser Div-Struktur klebt leider nicht immer schön am Fuß des Browserfensters… nun ja nun tut er es. Das soll kein episch langer Text werden. Wer bei Google nach sticky footer sucht, erhält als erstes Ergebnis gleich die perfekte Lösung. Die perfekt einfache Lösung?

Hier zu sehen die Grundstruktur der Seite, bestehend aus nur vier Divs.

Div-Struktur Version 5Nun für meinen Aufbau der Seite, schien diese Lösung leider nicht wirklich fehlerlos zu funktionieren. Vor Monaten hatte ich diesen CSS-Code schon einmal versucht in die Seite zu integrieren, jedesmal mit wenig Erfolg, weshalb der kleine Fehler bis heute existierte.

Die dort beschriebene Methode ist in der Tat perfekt, wieso nur funktionierte es nicht für meine Seite? Ein Blick auf den Aufbau der Div-Struktur offenbart das Problem dann doch recht schnell. Die dort angebotene Lösung, setzt einen etwas anderen Aufbau der Divs vorraus. Mein Problem ist die fast schon zu simple Stuktur, bei der das #header-Div, ein Problem darstellt, da es nicht innerhalb des #container-Divs liegt. Leider ist dieser #container mein vom Tutorial bezeichnetes #nonFooter-Div.

Mit meiner Struktur funktioniert es leider nicht ohne Anpassung:

<div id="header"></div>

<div id="container">
<div id="content"></div>
</div>

<div id="footer"></div>

So dagegen würde es problemlos funktionieren:

<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>

<div id="footer"></div>

Bekommt div#container einen Höhen-Wert von 100%, dann ergibt sich für die Gesamthöhe der Seite ein Wert aus 100% Fenster-Höhe, samt Höhe des Headers und Höhe des Footers. Nur einen zusätzlichen Wert kann ich durch den negativen Margin-Wert der Sticky-Footer Methode negieren, den des Headers leider nicht, genau dies war das Problem.

es klebt

Ich hab in sinnlos komplizierte Richtungen überlegt. Negative Margins samt Script-Berechnung für die Höhe des #container-Divs, die alle das Ziel haben sollten, die Höhe des Headers, aus der Höhe der Seite insgesamt zu entfernen. Wie nimmt man ein Element aus dem Flow der Seite? position:absolute;

Wieso fallen einem die einfachsten Lösungen so spät ein. Dieses position:absolute; ist die halbe Miete zur Lösung, der Footer ist sofort sticky. Von hier an spielt wie so oft, ein simpler Zufall die entscheidende Rolle. Ich hatte da immer dieses zweite Div (#content) innerhalb des #containers, primär angelegt um grafische Spielerein auch strukturell im #container-Div zu belassen. Geplant war mal Intro-Bilder für die jeweiligen Kategorien zu zeigen. Dieses #content-Div war schon immer da und konnte endlich eine Aufgabe bekommen.

Durch den nun absolut positionierten Header, klebte auch das #container-Div am oberen Rand der Seite. Ein oberes Padding auf diesem Element hätte theoretisch funktionieren sollen, praktisch tat es das nicht, da verschiedenste Browser wieder unterscheiden und das Padding mal zur Höhe addieren und mal nicht. Das #content-Div war bereit seine Hauptrolle zum Besten zu spielen. Dieses Div musste nun nur einen größeren margin-top Wert bekommen, nämlich zusätzlich genau den Wert der Höhe des Headers. Schon sitzt wieder alles an seinem Platz und der Footer klebt fest am Boden eures Browser-Fensters.

Die vom Mann in Blau angebotene Methode funktioniert in der Tat perfekt, braucht nur manchmal ein bischen Anpassung an das jeweilige Beispiel, besonders dann, wenn man wirklich jedes überflüssige Div einsparen möchte. Wie konnte ich so eine simple Lösung nur so lange übersehen. Peinlich, peinlich.