Tabelle auf ganze Seitenhöhe ausdehnen

nospam@example.com (Stefan Jahn) — Tue, 19 Feb 2008 21:17:26 +0100

Für das Layout einer Webseite werden oft noch Tabellen, sogenannte Layout-Tabellen, genutzt (im Gegensatz zu div-Containern in Verbindung mit CSS).

So kann man z.B. eine Webseite mit zwei Spalten gestalten. In der linken schmalen Spalte kommt die Navigation und in der rechten breiteren Spalte landet der eigentliche Inhalt. Jede Spalte bekommt nun noch eine passende Hintergrundfarbe.

+--+------+
|  |      |
|  |      |
|  |      |
+--+------+

So lange die Spalten genügend Inhalt (Text) haben, so das die Tabellenhöhe größer ist als die Höhe des Browserfensters, hat man kein Problem. Kaum ist aber die Tabellenhöhe zu klein, so sieht das Design der Webseite nicht mehr unbedingt den Vorstellungen entsprechend aus. In diesem Fall hat man im oberen Teil des Browserfensters die Tabelle mit dem hübschen Hintergrund, danach aber eine leere einfarbige Fläche die ganz und gar nicht zum Design passt.

+--+------+
|  |      |
|  |      |
+--+------+
###########

Wie schafft man es nun das die Tabelle immer die komplette Höhe des Browserfenster einnimmt. Die Angabe von height:100% in CSS bringt nicht den gewünschten Erfolg.

Dies liegt daran das sich die Höhe in diesem Fall nach dem darunterliegenden Container richtet. In diesem Fall <body> das wiederum in <html> eingebettet ist. Bei allen Container macht der Browser eine automatische Höhenanpassung und stellt die Höhe auf den größten gemeinsamen Nenner ein. Mit der CSS-Angabe height:100% für die Tabelle nimmt die Tabelle somit 100% Höhe von <body> ein, das Element <body> aber nicht 100% Höhe des Browserfensters.

Aber es gibt Abhilfe:

Das obige Beispiel gilt für die Layout-Tabelle der Klasse layout.

Stefans Webseite - Blog - HTML

Tabelle auf ganze Seitenhöhe ausdehnen