✔ [jQuery] Problem mit korrekter Höhenermittlung

[Alaniak]

Hallo zusammen,

ich habe eine Frage in Zusammenhang mit jQuery bzw. JS.

Und zwar habe ich ein zweispaltiges Template mit CSS gemacht. Die Höhe der linken Spalte soll immer gleich der Höhe der rechten Spalte sein. Soweit kein Problem:

var hoehe = $('#right_wrapper').height();
$('#leftcol_wrapper').css({'height':hoehe});

Das Problem ist jetzt, dass ich in der rechten Spalte einen Container mit Tabs habe. Das heißt es ist immer der Inhalt eines Tabs zu sehen während der Inhalt der restlichen (drei) Tabs mit display:none; nicht sichtbar ist.
Die Höhe von right_wrapper ist demnach: Höhe right_wrapper+ 3*Tabs. Das wäre immer noch nicht das richtige Problem, da ich einfach dreimal die Tabhöhe abziehen könnte. Leider sind die Tabcontainer nicht immer gleich hoch und somit wird die Linke Spalte immer höhe oder niedriger als die rechte.

Hab mal eine Grafik angehängt ums etwas besser zu verdeutlichen.

 

[Avorin]

Wenn ich dich richtig verstehe ist die Höhe der linken Spalte nur dann falsch wenn du den tab wechselst?
Demnach solltest du die Anweisung die du geschrieben hast im Click-event des Tabs aufrufen.
außerdem würde ich dir

var hoehe = $('#right_wrapper').outerHeight();

empfehlen, es ermittelt die tatsächliche Höhe, inklusive bsw, border, padding etc.

Gruß

Avorin

 

[Alaniak]

Nicht ganz, die Höhe der linken Spalte ist schon falsch, wenn die Seite geladen wird.
Bsp:
Tab1 -> 200px
Tab2 -> 300px
Tab3 -> 250px
Tab4 -> 150px
d.h. die linke Spalte wir dann: rechte Spalte +300+250+150 hoch. Da die nicht sichtbaren Tab-Container auch mitgezählt werden und das würde ich gern vermeiden.

So, jetzt hab ich eine ganz passable und einfache Lösung gefunden.
Ich muss das Script nicht so "starten":

$(document).ready(function() {
	// Höhe der Subnavigation
	var hoehe = $('#right_wrapper').outerHeight();
	$('#leftcol_wrapper').css({'height':hoehe});
});

sondern so:

$(window).load(function() {
	// Höhe der Subnavigation
	var hoehe = $('#right_wrapper').outerHeight();
	$('#leftcol_wrapper').css({'height':hoehe});
});

Mit der ready-Funktion wird das Script ausgeführt bevor der Content geladen ist. mit der load-Funktion erst wenn alles geladen ist. Dann erkennt er nämlich auch die Container mit display:none.