Gleiche Höhe zweier DIV-Elemente

chrissel

Woohooo!
ID: 211634
L
20 April 2006
4.489
472
Seit langem habe ich mal wieder ein Problem mit CSS.
Also 100% Höhe bei DIV-Elementen ist ja schon immer ein wenig komplizierter.
Nun habe ich ein Problem und denke, dass muss ich mit 100% Höhe lösen.. wenn man passend googelt findet man aber bei 100% Höhe immer nur Beispiele bei denen die komplette Seite 100% mindestens hoch sein soll.

Eine kleine Skizze zu meinem Problem:


Wie man dort sieht gibt es mehrere Kästchen, diese sollen einfach mal DIV-Elemente darstellen.
Nummeriert habe ich 3 DIVs. 1 ist ein Wrapper um 2 und 3. 2 und 3 sollen die gleiche Höhe haben, damit der Border zwischen beiden Elementen immer so hoch ist wie die höhere DIV-Box.
Aktuell habe ich bei der Box 3 ein linken Border definiert (habe ich dort definiert, da ich die Box nur nach Bedarf einsetze)...

Wenn ich nun 2 und 3 100% Höhe gebe und 1 auch eine feste Höhe in Pixel funktioniert das wunderbar. Nur leider kann 1 keine feste Höhe haben.. ich weiß ja nicht wie viel in den Boxen steht. Eine mindest Höhe (min-height) funktioniert leider nicht. Und eine kleine normale Höhe selbstverständlich auch nicht, dann ragt ja (je nach overflow-Einstellung) der Text über DIV Nr. 1 hinaus.


Ich hoffe ich habe mich verständlich ausgedrückt und jemand hat eine Idee für mein Problem. Danke!
 
Danke!

Die 'faux columns'-Lösung hatte ich auch noch zum Teil in meinem Kopf.
Bei der Lösung A gibt es leider bei mir noch ein Problem und wirklich schön ist diese natürlich nicht.. Lösung C.. naja, find ich auch nicht berauschend.
Ich habe mich nun dafür entschlossen die Semantik ein wenig nach hinten zu stellen und mir eine einzeilige Tabelle gebastelt... Nicht schön, aber funktioniert am besten.
 
Ich würde eine JavaScript-gestützte Variante bevorzugen, da es sich um keine essentiellen Funktionen der Seite dreht und man mit der Fallback-Lösung (ungleich hohe Boxen) auch leben könnte. In den meisten Fällen ist JavaScript eh aktiviert und der Mini-Schnipsel würde die Seitenladezeit auch nicht wirklich negativ beeinflussen.
 
Ich hab das auch schon gebraucht und wie im wiki geschrieben, mit einem Hintergrundbild gelöst. Hat bisher immer gut funktioniert (auch ohne JS)