nicht angemeldet
CSS Layout mit 100 % Höhe
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!
-
Warum suboptimal?
Geht eigentlich ganz wunderbar und zwar folgendermaßen:
-----------------------------
| Header |
| |
-----------------------------
-----------------------------
|---------------------------|
||Menu||Inhalt-div ||
|| || ||
|| || ||
|| || ||
|------| ||
| |-------------------||
-----------------------------Der das Menü und den Inhalt umschließende Div hat die Menüfarbe, der Inhalt div floatet neben dem Menü und hat die Hauptfarbe.
Wichtig ist dabei nur, dass der Inhalt immer mindestens so groß ist wie das Menü. Leicht zu bewerkstellingen mit min-height oder einem Workarround (Zum Beispiel mit einem floatenden spacer-div innerhalb des Inhalt-sivs mit der festen Mindesthöhe.)-
Hi Rafael!
Der das Menü und den Inhalt umschließende Div hat die Menüfarbe, der Inhalt div floatet neben dem Menü und hat die Hauptfarbe.
Wichtig ist dabei nur, dass der Inhalt immer mindestens so groß ist wie das Menü. Leicht zu bewerkstellingen mit min-height oder einem Workarround (Zum Beispiel mit einem floatenden spacer-div innerhalb des Inhalt-sivs mit der festen Mindesthöhe.)Danke dir! Etwas in die Richtung hatte ich schon überlegt, habs dann aber verworfen weil min-height ja vom IE, auch 7, nicht unterstützt wird. Aber mit Spacer wärs ne Möglichkeit.
Bleibt leider noch der große Brocken vom Punkt 2 - wie klappt es, dass dieses Layout immer Fensterfüllend ist? Hast du dafür auch noch einen Tipp?
In jedem Fall vielen Dank!
-
verworfen weil min-height ja vom IE, auch 7,
Nönö, der 7er interpretiert diese sauber...bei korrektem Doctype.
-
-
-
Hallo,
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.
Wenn wirklich „height=100%“ in deiner CSS-Datei steht, wundert's mich nicht. In CSS werden Eigenschaft und Wert durch einen Doppelpunkt getrennt. Ansonsten sind mir keine Fälle bekannt, in denen Firefox mit height:100% Probleme macht.
Gut, da habe ich bereits gelesen dass dieser hier offensichtlich noch min-height-Angaben benötigt
Nö, min-height ist nur ein Teil der height-Eigenschaft.
mfg. Daniel