Hi-de-ho

Diese Woche hatte ich auf Arbeit ein ungewöhnliches Problem, mit dem ich an die Grenzen von CSS gestoßen bin. Ich bekam die Aufgabe einige Screendesigns umzusetzen, an sich nichts Ungewöhnliches, allerdings gab es einige Bedingungen bezüglich der Sidebar: ein Widget – also eine Box innerhalb der Sidebar – sollte sich immer am unteren Rand der Sidebar aufhalten, wobei Sidebar und Content immer gleich hoch sein sollten, je nachdem, welches der beiden höher ist.

Das Problem

Ich dachte also erstmal nach, wie ich die beiden Teilprobleme lösen könnte. Eine Box an den unteren Rand einer anderen Box zu schieben ist einfach zu lösen. Die Sidebar bekäme ein position:relative und das Widget position:absolute sowie einen kleinen Wert für bottom. Wie lässt man jedoch Content und Sidebar gleich hoch sein? Dafür gibt es verschiedene Ansätze. Man könnte zum Beispiel eine Tabelle benutzen oder man suggeriert das Ganze (faux columns), indem man eine Hintergrundgrafik benutzt.

Ich konnte keine Tabelle benutzen, weil man position:relative auf td Tags nicht anwenden kann und die andere Variante viel weg, weil ich wirklich zwei gleich hohe DIVs brauchte. Da saß ich also und hatte ein schier unlösbares Problem.

“Man müsste irgendwie abfragen können, wie hoch die beiden DIVs sind und sie dann entsprechend anpassen.”, hab ich mir gedacht und hatte damit die Lösung schon gefunden. Nach Absprache mit einem Kollegen stand fest: Mir bleibt nichts anderes übrig als JavaScript zu benutzen.

Die Lösung

Ich entschied mich für jQuery, das sich in einigen anderen Projekten bereits als extrem nützlich und vielseitig erwiesen hatte. Es ist außerdem sehr einfach zu erlernen und bringt neben einer guten Dokumentation auch viele coole Plugins mit sich. “Die ganze Bibliothek nur für eine simple Abfrage?”, wird sich mancher an dieser Stelle denken. Ja. Natürlich geht das auch mit reinem JavaScript aber da ich jQuery auch noch an anderer Stelle im Template gebraucht habe, wäre es dumm gewesen, die jQuery Funktionen nicht zu nutzen.

Ich habe also die aktuelle jQuery Version eingebunden und mir dann kurz überlegt, was mein Script machen muss:

1. Hol dir die Höhe der Sidebar und die Höhe des Contents
2. Vergleiche beide Werte und bilde das kleinste gemeinsame Vielfache (kgV)
3. Setze die Höhe der beiden DIVs auf das kgV

Die Umsetzung

Soweit zur Theorie, kommen wir zur Praxis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//sync height of Content and Sidebar
function syncheight(){
	//Reset auf 'auto'
	$('#content').height('auto');
	$('#sidebar').height('auto');
 
	//hole aktuelle Werte
	var contentheight = $('#content').height();
	var sidebarheight = $('#sidebar').height();
	var fullheight;
 
	//vergleiche beide Hoehen, bilde kleines gemeinsames Vielfaches
	if (contentheight>=sidebarheight || contentheight==sidebarheight) {
		fullheight = contentheight;
	} else {
		fullheight = sidebarheight;
	};
 
	//setze beide auf gleiche Hoehe
	$('#content').height(fullheight);
	$('#sidebar').height(fullheight);
}

Das ist die ganze Funktion. #content und #sidebar stehen für die ID des Contents bzw. der Sidebar. Hinzu kam noch das Zurücksetzen der beiden Höhen auf den Wert auto. Das ist notwendig, will man später die Funktion in einem anderen JavaScript aufrufen. Möchte man, dass die Funktion automatisch aufgerufen wird, nachdem die Seite geladen ist, muss man die Funktion noch in eine document.ready – Funktion legen:

1
2
3

$(document).ready(function() {
	//hier die Funktion rein
});

Durch diese Funktion wartet der Browser bis die Seite vollständig aufgebaut wurde und führt dann erst das Script aus.

Demo

Mein Problem war gelöst, mein Chef zufrieden und ich denke mal, dem einen oder anderen könnte die kleine Funktion auch helfen.

Viel Spaß wünsch ich damit