10. Seite vertikal ausfüllen

Wie der Inhalt einer Website das Browser­fenster vertikal füllt, lässt sich über Stylesheets nur schwer steuern. Mit anderen Worten: Es ist beispielsweise nicht möglich, einem Element zu sagen, dass es bis zum Fuss der Seite reichen soll. Über eine Höhenangabe in Prozent oder Pixel funktioniert das nur, wenn die Höhe der Seite zum Vornherein bekannt ist. Möchte man aber eine vertikale Navigation einrichten, die in unserem Fall 150 Pixel breit ist, immer von oben bis unten geht und auf Seiten unterschiedlicher Länge zum Einsatz kommt, ist folgender Trick anzuwenden.

Die Stildefinition für die Navigation:

#navigation {background: blue; width: 150px;}

Um die blaue Farbe nun über die Einträge der Navigation bis zum unteren Ende der Seite zu verlängern, verwenden wir ein Hintergrundbild, das die gleiche blaue Farbe wie die Navigation aufweist und über repeat-y auf der ganzen Länge der Seite wiederholt wird:

body {background: url(blue.gif) 0 0 repeat-y;}

Die vertikale Verteilung der Seitenelemente ist per CSS schwierig zu steuern. Nur wenn man die richtigen Tricks kennt, kriegt man Designs wie dieses hin.