Divs und die "100%"-Höhe

[pascal007]

Hallo ihr CSS-Spezialisten .

Ich habe eine Frage zu Divs und 100% Höhe.

Also meine seite besteht aus

+------------------------------------------------+
| Menu                                           |
+------------------------------------------------+
| Menu2    | Content                             |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
|          |                                     |
+------------------------------------------------+

So das ganze soll 100% Height und Width des Bodys einnehmen. Dabei ist das "Menu" fixe 40pixel hoch. "Menu2" und "Content" sollen min-height: 100% des Bodys-40pixel (von "Menu") haben.

Menu2 und Content sind auf overflow:auto; gestellt, somit sollen diese Scrollbar sein, wenn der Inhalt grösser wird. Nie jedoch soll der Body einen Scrollbalken aufweisen. Das soll bei allen möglichen Auflösungen funktionieren (so ab 200px*300px).

Kann mir da jemand weiterhelfen ?

[wahsaga]

Menu2 und Content sind auf overflow:auto; gestellt, somit sollen diese Scrollbar sein, wenn der Inhalt grösser wird. Nie jedoch soll der Body einen Scrollbalken aufweisen.

Schon allein diese Anforderung halte ich für extrem unsinnig.
Seiteninterne Scrollbalken sind selten gut - und wenn es dann auch noch mehrere werden können, ist das ganze m.E. kompletter Käse.

Ich würde das Menü ggf. absolute oder fixed positionieren - und Menü2 und Inhalt im normalen Fluss belassen, so dass ihre ggf. überlangen Inhalte über einen Scrollbalken am Viewportrand erreichbar sind.

[pascal007]

Erst einmal danke für deine Antwort . Ich weiss schon was ich haben will und wieso. Es soll so sein wie ich es beschrieben habe.

Ich verstehe nicht ganz wie du das meinst. Wenn ich die auf 100% Höhe mache und "Menu" position:absolute; top:0px; left:0px; setze, überlappt "Menu" einfach die 2 Divs, ich möchte aber das die zwei Divs "Cotent" und "Menu2" komplett sichtbar sind.

[wahsaga]

Ich weiss schon was ich haben will und wieso. Es soll so sein wie ich es beschrieben habe.

Das dachte ich mir - macht es aber in meinen Augen kein bisschen sinnvoller.

Wenn ich die auf 100% Höhe mache und "Menu" position:absolute; top:0px; left:0px; setze, überlappt "Menu" einfach die 2 Divs

Ja, aber ihre Inhalte könntest du ja auf entsprechendem Abstand von oben halten. Hilft dir aber natürlich auch nichts, wenn du an den seiteninternen Scrollbalken festhalten willst - weil die dann immer noch bis unters Menü gehen würden.


Aber wenn du alle drei absolut positionierst, dann lässt sich das gewünschte ja ganz einfach erreichen*. (Nur bei zu kleinem Anzeigebereich bekommst du dann immer noch ein Problem. Aber hey, du weisst ja, was du willst ...)

* Ausser in IE < 7. Da müsstest du dann mit JavaScript nachhelfen, oder dich damit abfinden, dass es da nicht wie gewünscht aussieht.

[pascal007]

Kannst du mir das mal kurz in CSS-Form skizzieren? Also einfach die 3 Divs mit den entsprechenden position, height, width,[top,left,right,bottom] Werten ?
Weil ich kann mir das gerade nicht vorstellen wie ich das umsetzen soll.
Das mit den ganz kleinen Bereichen ist egal . Ja ich weiss, was ich will, ich bin ja auch schon ein Weilchen dabei .

Hehe < IE7 ignorier ich seit IE8 draussen ist. Wer mit einem Browser surft, der sich nicht an Standards hält, hat halt ein Chaos, das ist mir schnuppe. Ich will einfach nicht mehr auf alle Browsereigenen Macken achten, schon garn icht auf IE :P. Aber das ist eine philosophische Frage .

[wahsaga]

Was gibt's da viel zu skizzieren?

Du willst, dass die Elemente 40px von oben und ganz von unten ausgerichtet sind - also machst du für die jeweiligen „Koordinaten” einfach entsprechende Angaben.

[pascal007]

super... wusste gar nicht, dass der Div dann automatisch von top:40px; bis bottom:40px; gestreckt wird. So ist's natürlich ganz einfach . Vielen Dank für deine Hilfe .