Ich stehe vor meinem ersten Webprojekt bei dem das Layout fast gänzlich von CSS übernommen werden soll und nicht durch den Einsatz von Tabellen, wie in vorigen Projekten.

Die Seite soll dabei in drei horizontale Streifen geteilt werden. Dazu habe ich folgenden CSS-Code geschrieben:

#kopfzeile {
 position: static;
 height: 200px;
 width: 100%;
}
#inhaltsbereich {
 position: static;
 height: 400px;
 width: 100%;
}
#fusszeile {
 position: static;
}

Meine Problem dabei: Wie muss ich die Fusszeile formattieren, so dass diese immer am unteren Bildschirmrand zu finden ist?

Wenn ich folgenden Code benutze...

#fusszeile {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

..wird die Fusszeile zwar immer am unteren Bildschirmrand ausgerichtet, verkleinert mann jedoch das Browserfenster über den Inhaltsbereich, rutscht die Fusszeile in diesen Bereich hinein.