tricky sticky Footer

• Mi, 09. August 2006,
• 542 Wörter,
• 4 Kommentare,
• Tags:
• CSS,
• Website

Bei der Arbeit am Port­fo­lio, zeigte sich ein ner­vi­ges, altes und immer igno­rier­tes Pro­blem. Der Foo­ter die­ser Div-Struktur klebt lei­der nicht immer schön am Fuß des Brow­ser­fens­ters… nun ja nun tut er es. Das soll kein episch lan­ger Text wer­den. Wer bei Google nach sti­cky foo­ter sucht, erhält als ers­tes Ergeb­nis gleich die per­fekte Lösung. Die per­fekt ein­fa­che Lösung?

Hier zu sehen die Grund­struk­tur der Seite, beste­hend aus nur vier Divs.

Nun für mei­nen Auf­bau der Seite, schien diese Lösung lei­der nicht wirk­lich feh­ler­los zu funk­tio­nie­ren. Vor Mona­ten hatte ich die­sen CSS-Code schon ein­mal ver­sucht in die Seite zu inte­grie­ren, jedes­mal mit wenig Erfolg, wes­halb der kleine Feh­ler bis heute exis­tierte.

Die dort beschrie­bene Methode ist in der Tat per­fekt, wieso nur funk­tio­nierte es nicht für meine Seite? Ein Blick auf den Auf­bau der Div-Struktur offen­bart das Pro­blem dann doch recht schnell. Die dort ange­bo­tene Lösung, setzt einen etwas ande­ren Auf­bau der Divs vor­raus. Mein Pro­blem ist die fast schon zu sim­ple Stuk­tur, bei der das #header-Div, ein Pro­blem dar­stellt, da es nicht inner­halb des #container-Divs liegt. Lei­der ist die­ser #con­tai­ner mein vom Tuto­rial bezeich­ne­tes #nonFooter-Div.

Mit mei­ner Struk­tur funk­tio­niert es lei­der nicht ohne Anpas­sung:

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

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

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

So dage­gen würde es pro­blem­los funk­tio­nie­ren:

<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 Gesamt­höhe der Seite ein Wert aus 100% Fenster-Höhe, samt Höhe des Hea­ders und Höhe des Foo­ters. Nur einen zusätz­li­chen Wert kann ich durch den nega­ti­ven Margin-Wert der Sticky-Footer Methode negie­ren, den des Hea­ders lei­der nicht, genau dies war das Pro­blem.

es klebt

Ich hab in sinn­los kom­pli­zierte Rich­tun­gen über­legt. Nega­tive Margins samt Script-Berechnung für die Höhe des #container-Divs, die alle das Ziel haben soll­ten, die Höhe des Hea­ders, aus der Höhe der Seite ins­ge­samt zu ent­fer­nen. Wie nimmt man ein Ele­ment aus dem Flow der Seite? position:absolute;

Wieso fal­len einem die ein­fachs­ten Lösun­gen so spät ein. Die­ses position:absolute; ist die halbe Miete zur Lösung, der Foo­ter ist sofort sti­cky. Von hier an spielt wie so oft, ein sim­pler Zufall die ent­schei­dende Rolle. Ich hatte da immer die­ses zweite Div (#con­tent) inner­halb des #con­tai­ners, pri­mär ange­legt um gra­fi­sche Spie­ler­ein auch struk­tu­rell im #container-Div zu belas­sen. Geplant war mal Intro-Bilder für die jewei­li­gen Kate­go­rien zu zei­gen. Die­ses #content-Div war schon immer da und konnte end­lich eine Auf­gabe bekom­men.

Durch den nun abso­lut posi­tio­nier­ten Hea­der, klebte auch das #container-Div am obe­ren Rand der Seite. Ein obe­res Pad­ding auf die­sem Ele­ment hätte theo­re­tisch funk­tio­nie­ren sol­len, prak­tisch tat es das nicht, da ver­schie­denste Brow­ser wie­der unter­schei­den und das Pad­ding mal zur Höhe addie­ren und mal nicht. Das #content-Div war bereit seine Haupt­rolle zum Bes­ten zu spie­len. Die­ses Div musste nun nur einen grö­ße­ren margin-top Wert bekom­men, näm­lich zusätz­lich genau den Wert der Höhe des Hea­ders. Schon sitzt wie­der alles an sei­nem Platz und der Foo­ter klebt fest am Boden eures Browser-Fensters.

Die vom Mann in Blau ange­bo­tene Methode funk­tio­niert in der Tat per­fekt, braucht nur manch­mal ein bischen Anpas­sung an das jewei­lige Bei­spiel, beson­ders dann, wenn man wirk­lich jedes über­flüs­sige Div ein­spa­ren möchte. Wie konnte ich so eine sim­ple Lösung nur so lange über­se­hen. Pein­lich, pein­lich.

Zum gleichen Thema

• Sommerloch und LöcherOff-Topic

• Site Updates und was noch so zu machen istCSS

• wortgepresstOff-Topic

• Cataclysm EindrückeWorld of Warcraft

• CSS-Microformats - Trennung von Form, Form, Form und InhaltCSS

• das FaviconWeb Design

• screenspiredFundstücke