Gleiche Höhe für alle Blöcke

Gleiche Höhe für alle Blöcke

Heute möchte ich eine kleine aber feine Funktion vorstellen, mit der man mehrere Blöcke auf die selbe Höhe einstellen kann. Tabellen sind ja schon lange verpönt, und daher kämpft man dann öfter damit, mehrere Blöcke, die nebeneinander angezeigt werden, mit der selben Höhe auszustatten.

Man kann jetzt natürlich einfach eine fixe Höhe vergeben, schöner ist es allerdings, wenn die Blöcke sich automatisch am höchsten ausrichten würden. Und da zumindest ich des öfteren diese Funktionalität gebrauchen kann, habe ich mir in meine jQuery Utils eine Funktion aufgenommen, die sich genau darum kümmert.

$.fn.sameHeight = function() {
    var maxHeight = 0;
    this.each(function() {
        $(this).css('height', 'auto');
        if(maxHeight < $(this).height()) {
            maxHeight = $(this).height();
        }
    });
    this.each(function() {
        $(this).height(maxHeight);
    });
}

Wie man sieht ist die Funktion ganz einfach aufgebaut. Alle Blöcke mit der selben Klasse werden durchgegangen, der höchste Wert gespeichert und danach allen Blöcken zugewiesen. Eingesetzt wird das von mir meistens so:

$(document).ready(function () {
    $('.content').sameHeight();
});
$(window).resize(function() {
    $('.content').sameHeight();
});

Die document ready Funktion kümmert sich darum, das die Blöcke gleich einmal am Anfang alle angepasst werden. Die resize Funktion ist nur dann nötig, wenn man auf Responsive Design setzt, damit bei einer Größenänderung auch die Funktion neu aufgerufen wird.

Jetzt muss nur noch allen Blöcken die gleich hoch sein sollen, die selbe Klasse (in diesem Fall .content) verpasst werden, und schon ist die Höhe angepasst.

3 thoughts on “Gleiche Höhe für alle Blöcke

  1. Blechi

    Das ist eine super Funktion. Ich hoffe ich bekomme das mit der Implementierung hin. Habe da leider keine so weitgreifenden Fähigkeiten geschweige denn die Erfahrung solche Scripte zu schreiben. Umso dankbarer bin ich für den Codeschnipsel. Bin zwar eher durch Zufall hier gelandet aber genau diese Funktion brauche ich für meine Webseite, da dort auch mehrere Blöcke mit unterschiedlich langen Texten nebeneinander angezeigt werden. Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.