margin-bottom 0px klappt nicht

[kloeten]

Hallo,

ich versuche meine Fußzeile dazu zu bewegen sich direkt am unteren Rand des Browserfensters aufzuhalten.
Und zwar mit diesem CSS-Code
#footer {
height: 44px;
width: 100%;
margin-bottom: 0px;
margin-left: 0px;
}

Leider tut sie dies aber nicht sondern klemmt direkt unter dem Letzten Div-tag worann kann dies liegen?

 

[threadi]

Die Frage ist: soll der Footer immer am unteren Fensterrand hängen auch wenn er Inhalt der Seite größer ist oder soll sie nur unten hängen wenn der Inhalt der Seite nicht größer als das Browserfenster ist? Bei letzterem würde ich den Footer absolut positionieren (auch wenns unschick ist):

html,. body { height: 100%; }
#footer {
 position: absolute;
 bottom: 0px;
 width: 0px;
 height: 44px;
 width: 100%;
}

Bei ersterem wird es etwas schwieriger, da bräuchte man auch deinen html-Code ...

 

[kloeten]

Vielen Dank für die schnelle Antwort so wie du es gemacht hast ist es so wie ich es haben wollte.
Würdest du mir bitten noch sagen wo mein Fehler lag?Die Anweisung margin-bottom regelt doch auch den Abstand zum unteren Rand, oder nicht?

 

[threadi]

Sieht man doch an den Unterschieden im Code: du hast den Footer nicht absolut positioniert, dadurch klebt das div immer an seinem Vorgänger-Element. Durch die absolute Positionierung wird es aus dem Fluss genommen und an der Stelle positioniert welche angegeben ist. Der Abstand nach unten ist da völlig irrelevant.

 

[Frank]

Ich denke du hattest einfach ein Fehler im Denkansatz.
Margin-Bottom regelt den unteren Abstand zum nächsten Element.

Die Betonung liegt dabei auf "nächste Element". Da dein Footer das unterste (letze) Element ist gibt es kein weiteres Elemente das durch die Margin-Bottom regel angesprochen wird.

Das Browserfenster gilt ja nicht als HTML Element, somit gibt es keine weiteren Elemente und die Margin-Bottom regel wird ignoriert

 

[kloeten]

Jetzt hab ich's verstanden.

VD