2-Säule div Layout: rechte Spalte mit fester Breite, links Fluid, Höhe relativ an einander

Question

I ein Layout mit zwei Spalten wollen, zwei divs, wo der linke Fluid Breite und die richtige Breite hat fixiert. So weit, so gut - siehe unten - die Höhe der rechten Spalte muss jedoch in Relation zur Höhe der linken Spalte stehen. Wenn ich also etwas Inhalt in der Flüssigkeitssäule habe und die Größe des Browserfensters ändern würde, um dadurch die Höhe der linken Spalte zu erhöhen oder zu verringern, sollte die richtige folgen und die gleiche Höhe erhalten.

Was ich so weit gekommen: http://jsfiddle.net/henrikandersson/vnUdc/2/

Edit: Beschlossen, siehe Kommentar unten

Answer 1

So bekam ich eine Antwort auf meine Frage von @thirtydot (siehe Kommentar oben):

Müssen Sie IE7 unterstützen? Wenn nicht, können Sie Anzeige verwenden: table-cell

Answer 2

Ah, die zwei Spalten-Layout ‚ol. Wenn Sie nicht auf JavaScript zurückgreifen, um die Höhe einer Spalte zu verfolgen, um die andere anzupassen, können Sie dies nicht so tun, wie Sie es erwarten. Die Verwendung von height = "100%" funktioniert normalerweise auch in diesen Situationen nicht.

Was Sie können tun ist so etwas wie die alte Faux Column Technik. Die Größe der Divs wird nicht geändert, aber Sie haben ein Hintergrundbild auf dem übergeordneten Element, das vertikal gekachelt wird, wodurch die Illusion von gleichen Spalten entsteht. Alte Schule, ja, aber effektiv.

Answer 3

Sie können JavaScript verwenden, um die Höhe der linken div zu erhalten, dann legen Sie die richtige div auf diese Höhe.

Zur Höhe des linken div zu erhalten:

var divHeight = document.getElementById('left').offsetHeight; 

Zur Höhe des rechten div eingestellt:

document.getElementById('right').style.height = divHeight+'px'; 

Your JSFiddle example fixed.