Wie erreicht man, dass alle Spalten gleich hoch sind?

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Das vorherige Layout erfüllt die Anforderungen nicht ganz, die uns von dem grafischen Entwurf vorgegeben sind. Im Entwurf sind alle Spalten gleich hoch, ganz egal, wie viele Inhalte darin enthalten sind. Bei manchen Layouts ist das kein Problem, doch wenn Sie es sich in den Kopf gesetzt haben, alle Spalten gleich hoch zu machen, erfahren Sie hier eine Lösung, dieses Ziel zu erreichen.

Dazu müssen wir das Erscheinungsbild der Spalten »verfälschen« und Hintergrundbilder verwenden. Diese Technik wurde in dem Artikel »Faux Columns« von Dan Cederholm veröffentlicht und beruht im Wesentlichen darauf, dass Hintergrundbilder in div-Elemente des Dokuments eingefügt werden, die den Anschein von Spalten erwecken. Diese Technik werden wir gleich zwei Mal anwenden: einmal auf das div-Element #main, um die rechte Spalte zu simulieren, und zum zweiten Mal auf ein neues div-Element innerhalb von #main, mit dem wir die linke Spalte simulieren.

Erstellen Sie ein Hintergrundbild, das rechts einen blauen Balken in der Farbe der rechten Seitenleiste enthält, dann einen cremefarbenen Streifen in der Hintergrundfarbe der Seite mit einer feinen, 1 Pixel breiten hellblauen Linie, so wie in der folgenden Abbildung.

Abbildung: Das Hintergrundbild für die rechte Seitenleiste.

In der CSS-Datei müssen wir jetzt den Selektor #main suchen und Stilregeln für dieses Hintergrundbild einfügen. Mit der Regel background-repeat: repeat-y stellen wir sicher, dass es vertikal gekachelt wird. Die Eigenschaft background-position: top right sorgt dafür, dass das Hintergrundbild auf der Fläche rechts verankert wird.

Danach müssen wir das div-Element #main so hoch wie die höchste der drei Spalten machen, da das Hintergrundbild diesem Element zugeordnet ist. Im Augenblick ist nur garantiert, dass #main so hoch wie das div-Element #content ist, da die beiden schwebenden Seitenleisten keinen Einfluss auf seine Höhe haben. Die nächste Abbildung illustriert diesen Zusammenhang:

Abbildung: Ein schwebendes Element hat keine Auswirkung auf die Höhe seines Elternelements.

Dieses Problem können wir mit einem leeren div-Element, das die Regel clear: both enthält, lösen, das wir unmittelbar vor dem schließenden <div>-Tag von #main einfügen. Dieses leere div-Element erscheint damit unterhalb aller Spalten, genauso wie das div-Element footer. Da es aber in #main enthalten ist, sorgt es dafür, dass #main genauso hoch ist wie die höchste Spalte. Die Seite verhält sich damit so, wie in der folgenden Abbildung schematisch dargestellt:

Abbildung: Die Höhe des Elternelements wird mit der Eigenschaft clear angepasst.

Um diesen Effekt in die Praxis umzusetzen, müssen wir die folgenden Zeilen in unser HTML-Dokument einfügen:

Das Stylesheet wird um diese Regel erweitert:

Wenn Sie die Seite jetzt im Browser betrachten, sehen Sie, dass sich die rechte Seitenleiste sich bis zur Unterkante der längsten Spalte erstreckt. Dieser Effekt ist in der folgenden Abbildung dargestellt.

Abbildung: Ein Hintergrundbild erzeugt die rechte Spalte.

Für die linke Spalte brauchen wir nun ein neues div-Element, dem wir den Hintergrund zuweisen können. Deshalb fügen wir das div-Element mit dem Namen id="main2" in das Dokument ein:

Dann erzeugen wir ein weiteres Bild, diesmal als Hintergrund für die linke Seitenleiste. Es soll 161 Pixel breit und 4 Pixel hoch sein und an beiden Seiten eine 1 Pixel starke hellblaue Randlinie erhalten.

Nun definieren wir die Regeln für #main2, dem wir unser neues Bild als Hintergrundbild zuweisen und links unten in #main2 verankern. Der Hintergrund der Fläche soll weiß sein.

Ein Blick auf die Seite in der nächsten Abbildung zeigt, dass unsere ganzformatigen »geschwindelten« Spalten fast fertig formatiert sind. Lediglich die unteren Abschlüsse brauchen noch ein wenig Feinarbeit.

Abbildung: Das Design der »geschwindelten Spalten« ist nahezu fertig.

Wir entfernen den unteren Rahmen des div-Elements #content, indem wir die Eigenschaft border durch die Definition von Rahmen an den drei anderen Seiten ersetzen:

Ebenso entfernen wir den unteren Rahmen der linken Seitenleiste, indem wir die Eigenschaft border-bottom streichen:

Wenn Sie das Ganze nun im Browser anschauen, sollten die Spalten so aussehen, als ob sie die gesamte Höhe des Bildschirms einnehmen, wie in der folgenden Abbildung.

Abbildung: Alle Spalten sind gleich hoch.

Zugegeben, diese Darstellung erfordert einige Tüfteleien in Ihrem Grafikprogramm, um die Hintergrundbilder zu erzeugen, sodass diese exakt ins Layout passen. Wenn Sie diese Bilder aber erst einmal erzeugt haben, funktioniert diese Lösung sehr gut.