css footer (aka auf den Boden du dreckiges Stück!)

[YoshiGreen]

Moin,

ich bastel gerade an einem Footer via CSS und das Mistding zuckt leider immer noch rum. Bislang hab ich es schonmal auf den Boden werfen können:Bild II. Zwischen dem Inhalt (gelb) und dem Footer bleibt Platz - sehr schön.

Der Horror beginnt, wenn man im Browser reinzoomt (ctrl + bei FF und Chrome).
Bild III
Der gelbe Inhalt verschwindet hinter dem Footer. Gut zu sehen, am Scrollbalken der sich in Bild III ganz oben befindet.

Und wer jetzt noch nicht Brechreiz bekommen hat, kann etwas runterscrollen und sieht dann diesen Albtraum: Bild IV (Achtung, nur für starke Nerven!)

Die Tutorials die ich im Internet finde, sind entweder ziemlich kompliziert, so dass mir da einige Zweifel an der Wirksamkeit aufkommen. Oder sie haben Probleme, wenn der Inhalt der Seite zu klein ist und keinen Scrollbalken erzeugt. Dann klebt der Footer direkt am Inhalt dran, finde ich persönlich doch etwas unschön.

Ich habe mal ein mmb drangehängt (default.css erzeugt den Fehler beim zoomen und default1.css rutscht nach oben). Würde mich freuen, wenn mir jemand zeigen kann wie man das Ding da unten fixiert bekommt.

[Xardas der Dunkle]

Hast du es schon mit: position: fixed; versucht?

Code:

div#footer{
    background-color: #4FE840;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20px;
}

body {
    margin-bottom: 20px;
}

[desiderium]

Ich denke Xardas hat das Problem gelöst,
kann mir dein Stylesheet grad nicht angucken, aber ich könnte spekulieren das du deine Footer-Box mit position: absolute; positioniert hast.

Nur damit du weißt warum das so passiert, wie's bei dir passiert: ein mit absolute positioniertes Objekt, wird immer an dieser Position bleiben an der es steht. mitscrollen oder ähnliches tut's dann nicht. (Meiner Erfahrung nach, ich bin auch erst seit 2 Jahren beim Webdesign dabei, bitte Xardas schlag mich nicht. xD)

[YoshiGreen]

Ok, fixed hat leider auf der Hauptseite nicht funktioniert.

Durch eine Empfehlung kam ich nun an diese Lösung: http://ryanfait.com/sticky-footer/
Ich bin zwar kein Freund von wrapper-divs und vor allem stört mich die Tatsache, dass die Footerhöhe fix im CSS drin stehen muss (height von push und footer bzw. margin-bottom vom wrapper) aber dafür funktioniert es so wie ich es mir vorgestellt habe.