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.
Nun 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.
4 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>vielen dank für das coole tutorial!
eine kleine anmerkung von mir: auf der demo seite zum „sticky footer“ ist bei mir die untere zeite im footer angeschnitten. und darum habe ich wohl auch ständig rechts einen rollbalken. egal wie gross ich das fenster ziehe.
ich weiss ja, das ich alleine mit dem problem da stehe, weil ich die minimal schrift im firefox so gross eingestellt habe. aber auf dem 30″ tft sind die schriften zum dauerhaft lesen unter 16 Punkt einfach zu klein.
aber ich denke mal dass user mit seh-problemen (also alles bis kurz vor dem braille-display) auch ihre schriften stark vergrössern.
eine kleine anmerkung von mir: auf der demo seite zum „sticky footer“ ist bei mir die untere zeile im footer angeschnitten. und darum habe ich wohl auch ständig rechts einen rollbalken. egal wie gross ich das fenster ziehe.
Ich vermute mal, das bei so einer großen Grundgröße irgendwelche Padding oder Border-Größen relativ mitwachsen und dann so groß werden, dass der negative Margin-Wert des Footers nicht mehr 100%ig ausreicht.
ich weiss ja, das ich alleine mit dem problem da stehe, weil ich die minimal schrift im firefox so gross eingestellt habe. aber auf dem 30″ tft sind die schriften zum dauerhaft lesen unter 16 Punkt einfach zu klein.
Mal so aus reiner Neugier, da du hier schreibst denke ich zwar die Antwort zu kennen, aber fragen kostet ja nichts. Ist diese Seite hier, mit solch einer großen Grundeinstellung der Font-Größe problemlos bedien- und lesbar? Ich versuche zwar immer alle Seiten relativ flexibel anzulegen, aber die Möglichkeit auf einem 30 Zoll Display zu testen sind halt sehr begrenzt.
Mal so aus reiner Neugier, da du hier schreibst denke ich zwar die Antwort zu kennen, aber fragen kostet ja nichts. […]
diesbezüglich ist die site 1000 mal besser als viele andere sites in denen teilweise texte verschwinden und links nicht anklickbar sind. ich zähl einfach mal auf, was mir auffällt was nicht „so schön“ ist.
das wars schon. hab mal alle bereiche durchgeguckt, konnte aber nichts weiteres feststellen.
Danke für den Tipp, denn ein „Redesign“ weg vom Standardlayout hin zum eigenen Skin steht bei mir im September an.