• Tutorials
• Tipps & Tricks
• API-Referenz
• Häufige Fehler
• Was ist..?

Gleiche Höhe mit jQuery EqualHeights

Mit dem YAML-CSS-Framework können nebeneinander angeordnete Layoutboxen die selbe Elementhöhe zugewiesen werden (equal height boxes). Dieses Tutorial zeigt, wie man das mit dem jQuery-Plugin EqualHeights macht.

Der Vorteil mit jQuery EqualHeights ist, dass die Layoutboxen unabhängig voneinander positioniert sein können. Auch kann dieses Verhalten mehreren Elementen unterschiedlichen Typs mit einem Funktionsaufruf zugewiesen werden. Wie das aussieht, zeigen wir an einem Beispiel.

Ohne EqualHeights

Sowohl der Titel, der möglicherweise umbricht, als auch der Text, der unterschiedlich lang sein kann, führen zu einem uneinheitlichen Bild. Mit CSS lässt sich wohl was tun. Es ist allerdings kaum möglich, die für einen Browser spezifische Darstellung bereits zuvor hinreichend zu berücksichtigen. Während im einen Browser die Titelzeile umbricht, ist das möglicherweise bei einem anderen aufgrund der Darstellung einer kleineren Schrift gerade noch nicht der Fall.

Mit EqualHeights

Schauen wir uns den selben HTML-Code noch einmal an. Diesmal haben die Floating-Divs jedoch die Klasse aitsuExampleBox zugewiesen und die Höhen werden mit dem EqualHeights-Plugin einander angeglichen:

Für das vorliegende Beispiel sieht der Aufruf wie folgt aus:

$(document).ready(function () { $("div.aitsuExampleBox h3").equalHeights(); $("div.aitsuExampleBox p").equalHeights(); });

Plugin

Folgender Code kann nach der Einbindung von jQuery in den HTML-Code integriert oder referenziert werden:

(function($) { $.fn.equalHeights = function() { var targetHeight = 0; this.each(function() { if ($(this).height() > targetHeight) targetHeight = $(this).height(); }); this.each(function() { $(this).height(targetHeight); }); return this; }; })(jQuery);