Zwei variabel-hohe Divs übereinander in Summe 100% Höhe

[sandmann]

Hallo,

ich möchte zwei Divs übereinander haben, wobei das erste Div sich in der Höhe dem Inhalt anpassen soll und das zweite Div darunter den restlichen Platz bis zum unteren Seitenrand einnehmen soll.

-     +------------+
 ^     | Text mit   |  <- erstes Div, variable höhe je nach Text
 |     | mehreren   |
 |     | Zeilen.    |
 |     +------------+
100%   |            |
 |     |            |  <- zweites Div, nimmt restlichen Platz
 |     |            |     bis zum unteren Bildschirmrand ein
 v     |            |
 -     +------------+

Danke im Voraus,
Sandmann

[sandmann]

Wohl zu schnell abgeschickt... sorry :-)

Ich hatte das ganze bisher mit einer Tabelle realisiert, möchte dies aber nun mit Divs und CSS gestalten.

Ich freue mich auf Eure Unterstützung :-)

[Gunther]

Hi!

Ich hatte das ganze bisher mit einer Tabelle realisiert, möchte dies aber nun mit Divs und CSS gestalten.

Ja, so etwas lässt sich per display:table[-row|-cell] realisieren. Allerdings nicht ganz ohne auf gewisse "Besonderheiten", vor allem im aktuellen Chrome Browser, zu achten.

Zukünftig, wenn es eine breitere Unterstützung für das CSS Flexible Box Layout Module gibt, ließe es sich wohl auch damit realisieren.

Gruß Gunther

[sandmann]

Danke für den Hinweis, Gunther!

Scheint so, als wäre im Moment noch empfehlenswert, die Tabellen-Variante weiterhin einzusetzen, bis das CSS Flexible Box Layout Module unterstützt wird, oder?

[Gunther]

Scheint so, als wäre im Moment noch empfehlenswert, die Tabellen-Variante weiterhin einzusetzen, bis das CSS Flexible Box Layout Module unterstützt wird, oder?

Ich befürchte, dass du mit "Tabellen-Variante" meinst, <table> Tags und & Co. in deinem Quellcode für Layoutzwecke zu missbrauchen. Davon sprach ich nicht, sondern von den entsprechenden Werten für die Display Eigenschaft eines Elements im CSS.

Es steht dir aber auch noch eine Reihe anderer Möglichkeiten offen, z.B. das Ganze mit Javascript zu lösen (natürlich mit der Einschränkung, dass es dann nur bei aktiviertem JS funktioniert).

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Zukünftig, wenn es eine breitere Unterstützung für das CSS Flexible Box Layout Module gibt, ließe es sich wohl auch damit realisieren.

„Fluxbox“ ;-)

Qapla'

[Gunnar Bittersmann]

@@sandmann:

nuqneH

ich möchte zwei Divs übereinander haben

Wozu divs?

wobei das erste Div sich in der Höhe dem Inhalt anpassen soll

Das tut es automatisch.

und das zweite Div darunter den restlichen Platz bis zum unteren Seitenrand einnehmen soll.

Wozu soll der Container gut sein, wenn er keinen Inhalt hat?

Was ist dein eigentliches Ziel?

Qapla'

[sandmann]

Wozu soll der Container gut sein, wenn er keinen Inhalt hat?

Was ist dein eigentliches Ziel?

Im unteren Div soll eine Karte angezeigt werden, welche den restlichen Platz einnimmt. :-)

[sandmann]

*push*

Mein Problem besteht leider immernoch. Ich freue mich auf Eure Unterstützung. :-)