Bleeding: CSS Layout mit 100 % Höhe

Beitrag lesen

Hallo,

ich möchte das auf http://de.selfhtml.org/css/layouts/mehrspaltige.htm gezeigte "Mehrspaltiges Layout mit Kopf- und Fußzeile" für eine Website einsetzen - funktioniert in der Form auch gut (ich habe nur die rechte Navigation weggelassen, also eigentlich Header+Footer mit zweispaltigem Layout).

Allerdings hat es zwei unschöne Nebeneffekte:

1. Die linke Navigation soll farblich hinterlegt sein. Das schaut allerdings blöd aus, wenn die gesamte Seite höher ist als die Navigation. Dann hört die farbliche Hinterlegung mitten auf der Seite auf. Wie bekomme ich es hin, dass die Höhe der linken Navigation immer von Kopf- bis Fußzeile reicht (quasi height=100%).

2. Genau andersrum, nämlich wenn der Inhalt im Content-Bereich nur sehr kurz ist, ergibt sich ein unschönes Bild wenn die gesamte Seite zB nur 300 Pixel hoch ist vor allem bei höherauflösenden Bildschirmen dann unter dem Inhalt gähnende Leere herrscht. Ich hätte gern dass hier sowohl linkes Menü als auch der Inhaltsbereich mindestens die Höhe des aktuellen Browserfensters hat, also quasi ebenfalls height=100%. Im IE bekomme ich das hin, indem ich sowohl html, body als auch die jewiligen divs im CSS eben auf height=100% setze, dem Firefox reicht das aber noch nicht. Gut, da habe ich bereits gelesen dass dieser hier offensichtlich noch min-height-Angaben benötigt - aber es ergibt sich ohnehin sowohl im Firefox als auch im IE ein anderes Problem bei einer 100%-Angabe: die Höhe der linken Navigation als auch des Inhalts ist 100 %, allerdings wird dabei nicht der bereits verbrauchte Platz durch zB Header- oder Footer-divs abgezogen bzw. auch nicht die dort konfigurierten paddings oder margins - was dann darin resultiert, dass in jedem Fall - auch wenn nur wenig Content in Inhalt und/oder Navigation ist - die Gesamthöhe der Seite über die des Browserfensters hinausgeht - was sehr unschön ist, zumindest wenn nicht mehr Content da ist als ohnehin innerhalb des geöffneten Fensters Platz hat. Noch unschöner ist es natürlich wenn zB linke Navigation und Inhalt unterschiedliche paddings haben - dann sind die Höhen von Inhalt und Navigation sogar unterschiedlich.

Wie setzt man sowas sinnvoll mit CSS um?

Ich habe irgendwie das Gefühl, dass CSS-Layouts für soetwas, sagen wir mal, suboptimal ist. Also doch wieder Tabellen? :-(

Vielen Dank im Voraus für jede Hilfe!