Sticky Footer Problem

[Crunchip]

Hallo,
ich versuche gerade mich mit dem Sticky Footer auseinander zu setzen doch scheitere ich leider an einem Problem.
Ich habe einen container und unterhalb dieses containers soll dann der footer zu 100% über die Fensterbreite gehen und immer am unteren ende fixiert sein.
Doch sobald mein content Bereich mehr Text enthält rutscht der footer nicht mit nach unten und bleibt auf einer höhe stehen.

Ich habe das ganze mal Onlinegestellt um euch das Problem zu zeigen. Was genau mache ich falsch das der footer nicht mit nach unten scrollt?

Zur Seite

 

[hela]

Hallo,

in den CSS-FAQ werden drei Möglichkeiten beschrieben, mit denen man das machen kann:
Wie lässt sich der Footer am unteren Fensterrand ausrichten?

Wenn du unbedingt die dritte Methode mit einem absolut positionierten Footer realisieren willst, dann müsstest du den Footer innerhalb des Wrappers als Kindelement unterbringen. Bei dir sind aber Wrapper- und Footer-Block Geschwisterelemente. Ansonsten positioniere den Footer relativ und richte deine CSS-Regeln nach o.g. Tutorial ein.

 

[Crunchip]

Super danke das ist genau das wonach ich gesucht hab und denke mal mit dem ändern der footer width auf 100% sollte ich mein Problem gelöst haben oder kann das später zu Fehlern führen?
Wie bekomme ich es nun noch hin oben am Seitenbegin einen abstand zu erstellen ohne das ich einen sc rollbalken bekomme? jedesmal wenn ich margin oder paddingwert im wrapper einbinde um oben einen abstand von 30px zu bekommen erhalte ich einen scrollbalken.
Wäre super wenn man mir da noch helfen könnte.
Dann kann ich das alles in mein Layout einbauen.

Edit: Ich hätte auch gerne am ende des wrapper bereichs noch ein klein wenig platz zwischen footer und wrapper so das man den hintergrund ein wenig sieht vlt 20px.

Keiner mehr eine Idee wie ich einen oberen abstand und einen abstand vom content zum footer bereich bekomme?

 

[ByeBye 270552]

Für den oberen Abstand (gemäß dem Fall dass ich dich richtig verstehe) brauchst du doch im Wrapper dein margin nur zu verändern auf margin: 20px auto -80px; Dabei sind die 20px jetzt erstmal nur Beispielhaft. Für den unteren Abstand solltest du vielleicht die -80px entfernen und die 80px aus dem padding in der ID middle. Zusammengefasst:

#wrapper {
    margin: 20px auto;
}
#middle {
    padding: 10px;
}
#footer {
    margin: 0 auto;
}