CSS Layout

Hallo,
ich habe vor folgendes Layout mit CSS zu realisieren:



Was kann ich machen, damit die Seite die gesamte Höhe des Browser-Fensters beansprucht, auch wenn weniger Inhalt in den Divs steht? Ich hatte eigentlich vor bei dem Div#1 die Höhe mit min-width einzustellen, das geht aber bei IE nicht. Div#2 soll immer ca 200px hoch sein und Div#3 soll dann mindestens die übrige Höhe des Browserfensters einnehmen.

Original geschrieben von cypresshill
Ich hatte eigentlich vor bei dem Div#1 die Höhe mit min-width einzustellen, das geht aber bei IE nicht.

Das geht auch in allen anderen Browsern nicht ;-)

Div#2 soll immer ca 200px hoch sein und Div#3 soll dann mindestens die übrige Höhe des Browserfensters einnehmen.

Ich würde es so versuchen:

Div#3 bekommt Mindesthöhe von 100%, und wird per margin-top:-300px; "unter" Div#2 gezogen (dann vermutlich noch relative Positionierung und z-index erforderlich, sonst ist das "unter" nämlich ein "über"), und der erste Inhalt von Div#3 wird dann per margin-top:300px wieder entsprechend weit nach unten geschoben.

Alternativ kann ggf. auch Div#2 absolute positioniert werden, dann entfällt das Hochziehen von #3 per negativem margin-top.

EDIT:

---

Falls solche Trickserei überhaupt nötig ist - vielleicht kann man ja auch einfach Div#2 in Div#3 hineinlegen ....?

---

Dass sich die Höhen von Div#1 und Div#3 dadurch immer noch nicht automatisch angleichen, wenn einer von beiden > 100% wird, ist natürlich klar. Da bräuchte man dann evtl. noch faux columns, wenn das wichtig wäre.

Div2 kann nicht in Div3 hineingelegt werden, weil Div3 einen Innenabstand hat und Div2 nicht. Ich meinte eigentlich, dass das mit der Mindesthöhe bei IE nicht funktioniert. Aber wie gebe ich da dann eine Mindeshöhe an?

justf***kinggoogleit