kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

jQuery: Gleiche Höhe für Elemente

In flexiblen Web-Layouts kann die Höhe von Elementen eine Herausforderung darstellen. Beispielsweise findet man auf vielen Websites nebeneinander angeordnete Teaser-Elemente mit Text und einem »Weiterlesen«-Button. Redaktionell sollte man natürlich darauf achten, dass die Texte gleich lang sind, aber je nach Breite des Displays brechen die Wörter anders um, was wiederum dazu führt, dass die Buttons nicht immer auf gleicher Höhe sitzen. Mit CSS lässt sich das Problem nur schwer lösen, daher möchte ich in diesem Beitrag ein praktisches jQuery-Snippet archivieren.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Gleiche Höhe von Elementen mit jQuery erzwingen

Mit Hilfe einer each-Schleife in jQuery könnt ihr die Höhe von Teasern oder anderen Elementen angleichen. Im folgenden Beispiel erhalten alle Elemente mit dem Selektor .teaser eine Höhe von 300 Pixeln.

// Suche alle Elemente mit der Klasse ».teaser«.
$('.teaser').each( function(){
  // Ändere bei diesen Elementen die Höhe auf 300 Pixel
  $(this).css('height', '300px');
});

Beispiel anschauen

Elemente ansprechen die höher/niedriger als X Pixel sind

Im vorherigen Beispiel wurde die Höhe generell auf 300 Pixel erhöht. Im responsive Design und in flexiblem Weblayouts ändert sich jedoch sowohl die Höhe als auch die Breite von Elementen. Erst ab einem bestimmten Punkt tritt i.d.R. ein Darstellungsfehler auf. Mit folgendem Snippet werden alle .teaser angesprochen und grün eingefärbt, die niedriger als 150 Pixel sind.

$('.teaser').each( function(){
  if ($(this).height() < 150) { // Prüfe ob die Höhe eines Teasers niedriger als 150 Pixel ist
    $(this).css('background', 'lime'); // Wenn ja, färbe den Hintergrund grün ein.
  }
});

Beispiel anschauen

Elemente an der Höhe des höchsten Elements ausrichten

Wenn alle Elemente automatisch so hoch wie das höchste Element werden sollen, verwendet folgendes Snippet. Hierbei wird die Schleife zwei mal durchlaufen: Im ersten Durchlauf wird in Erfahrung gebracht welcher .teaser am höchsten ist. Im zweiten Durchlauf wird allen Elementen diese Höhe zugewiesen.

var highest_element = 0;

// Prüfe, welches Element am höchsten ist
$('.teaser').each(function() {
  if ($(this).height() > highest_element) {
    highest_element = $(this).height();
  }
});

// Weise diese Höhe allen Elementen zu.
$('.teaser').each(function() {
  $(this).height(highest_element);
});

Beispiel anschauen

Alle Elemente neu berechnen, wenn die Größe des Browserfensters verändert wird

In den oben gezeigten Beispielen wird die Höhe einmalig beim Seitenaufruf berechnet. Wenn sich die Höhe der Elemente jedoch ändern kann – beispielsweise weil das Layout flexibel ist und die Höhe der Elemente von der Breite des Viewports abhängig ist – sollte die Berechnung erneut stattfinden, sobald das Browserfenster verändert wird. Um die Performance etwas zu schonen, wird ein Timeout eingerichtet.

function kb_equal_height() {
  var highest_element = 0;
 
  // Lösche die Höhe
  $('.teaser').each(function() {
    $(this).removeAttr('style');
  });

  // Prüfe, welches Element am höchsten ist
  $('.teaser').each(function() {
    if ($(this).height() > highest_element) {
      highest_element = $(this).height();
    }
  });

  // Weise diese Höhe allen Elementen zu.
  $('.teaser').each(function() {
    $(this).height(highest_element);
  });
};

window.onload = kb_equal_height;

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(kb_equal_height, 100);
});

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

23 Kommentare

  1. nitnat

    Verfasst am 19. Mai 2015 um 12:08 Uhr.

    Anstatt eine fixe Höhe zu vergeben, wäre es praktischer, wenn sich die Höhe am längsten Element innerhalb eines Containers ausrichtet, wie bspw. bei Foundation Equalizer http://foundation.zurb.com/docs/components/equalizer.html

    • Jonas Hellwig

      Verfasst am 19. Mai 2015 um 12:26 Uhr.

      Sehr guter Einwand. Meinst du so etwas hier?

      var highest_element = 0;

      // Prüfe, welches Element am höchsten ist
      $('.teaser').each(function() {
      if ($(this).height() > highest_element) {
      highest_element = $(this).height();
      }
      });

      // Weise diese Höhe allen Elementen zu.
      $('.teaser').each(function() {
      $(this).height(highest_element);
      });

      Beispiel anschauen

  2. oliver

    Verfasst am 19. Mai 2015 um 21:30 Uhr.

    Hmhm .. interessante Lösung, vielen Dank!

    Ich überlege gerade, ob man das Problem Elemente an der Höhe des höchsten Elements ausrichten nicht mit display: flex im Elternelement lösen könnte?

    http://codepen.io/5202/pen/PqzggV

    Spricht was dagegen?

    • Jonas Hellwig

      Verfasst am 20. Mai 2015 um 18:32 Uhr.

      Hallo Oliver, in diesem konkreten Fall hast du vollkommen Recht. Das würde auch mit Flexbox wunderbar funktionieren (wie deine Demo zeigt). Bei komplexeren Elemente wird es manchmal etwas schwieriger.

    • Sven

      Verfasst am 21. Mai 2015 um 14:06 Uhr.

      Problem aktuell bei Flexbox ist, dass es erst ab IE10 funktioniert. Darunter muss man Fallbacks einbauen.

  3. Markus

    Verfasst am 20. Mai 2015 um 10:42 Uhr.

    Weiß leider nicht mehr, wo ich die Funktion im Netz gefunden habe, doch finde ich ganz clever.

    Damit sich die Elemente auch in ihrer eigenen Reihe auf die selbe Höhe bringen, kann man das ja auch so erweiteren.

    „Alle Kind-Div-Elemente von Eltern-Div auf eine Höhe bringen – Funktion“:

    $.fn.eqHeights = function(options) {
    var defaults = {
    child: false
    };
    var options = $.extend(defaults, options);

    var el = $(this);
    if (el.length > 0 && !el.data(‚eqHeights‘)) {
    el.data(‚eqHeights‘, true);
    }

    if( options.child && options.child.length > 0 ){
    var elmtns = $(options.child, this);
    } else {
    var elmtns = $(this).children();
    }

    var prevTop = 0;
    var max_height = 0;
    var elements = [];
    elmtns.height(‚auto‘).each(function() {

    var thisTop = this.offsetTop;

    if (prevTop > 0 && prevTop != thisTop) {
    $(elements).height(max_height);
    max_height = $(this).outerHeight();
    elements = [];
    }
    max_height = Math.max(max_height, $(this).outerHeight());

    prevTop = this.offsetTop;
    elements.push(this);
    });

    $(elements).height(max_height);
    };

    Aufruf: $(‚.DEINE_KLASSE‘).eqHeights();

  4. Michael

    Verfasst am 21. Mai 2015 um 10:11 Uhr.

    https://github.com/FlorianKoerner/equalHeight.js

    Ich habe mit diesem Script gute Erfahrungen bei unserer aktuellen responsive-Umstellung gemacht. Eigentlich suchen wir aber immer noch nach einer Lösung, die ohne Javascript auskommt und ich dachte, Flexbox könnte bei dem Problem an einigen Stellen behilflich sein.

    • Alex

      Verfasst am 21. Mai 2015 um 15:12 Uhr.

      Hallo Michael,

      Ein reine CSS-Lösung (die JS als Fallback für ältere Browser benutzt), gibt es im YAML-Framework. Schau mal hier: http://www.yaml.de/docs/index.html#yaml-grids. Scroll dort ein wenig runter bis Du links „Equal Heights Grids“ siehst. Wenn Du mit Chromebug, Firebug, o.ä. den Quelltext der Beispielboxen untersuchst, erkennst Du auch schon die Lösung. Auf jede der Boxen wird ein padding-bottom von 10000px und ein margin-bottom von -10000px angewendet. Der Wrapper-Container für beide Boxen braucht dann wohl noch ein overflow: hidden.

      Den Pixel-Wert von 10000 bzw. -10000 kann man sicherlich auch kleiner halten, je nachdem wie viel Content die Boxen enthalten sollen. Es reicht wahrscheinlich in den meisten Fällen schon 2000px bzw. -2000px.

      Ich weiß nicht, ob ich in meiner Schilderung was übersehen habe, da es schon länger her ist, dass ich diesen Trick benutzt habe, funktioniert, aber eben auch ganz gut ohne das YAML-Framework und ohne JS.

  5. Nicolas

    Verfasst am 21. Mai 2015 um 16:05 Uhr.

    Hey, tolle Snippets!

    Ich persönlich benutze immer folgendes Script:
    http://brm.io/jquery-match-height/

    LG Nicolas

  6. Sven

    Verfasst am 22. Mai 2015 um 6:50 Uhr.

    Flexbox (mit display: table/-cell; Fallback). Dafür braucht man kein JavasScript.

    • Jonas Hellwig

      Verfasst am 22. Mai 2015 um 8:48 Uhr.

      Bei Geschwister-Elementen in der gleichen Zeile funktioniert Flexbox bzw. Display Table gut, aber sobald der Aufbau verschachtelt ist oder die Elemente nicht direkt nebeneinander liegen kommt man um JS kaum herum. Ich hatte beispielsweise letztens den Fall, dass alle Überschriften in meinen Teasern gleich hoch sein mussten.

      • Sven

        Verfasst am 22. Mai 2015 um 10:04 Uhr.

        das ist ein Designfehler ;) Wenn man im „nachhinein“ die Höhe der Überschriften anpassen muss, dann geht das nur mit JS, das stimmt. Dein Beispiel ist aber über Teaserblöcke, die nebeneinander liegen. ;)

      • Jonas Hellwig

        Verfasst am 22. Mai 2015 um 11:01 Uhr.

        Haha, ist klar! :) Ich hatte etwa einen Anwendungsfall wie diesen hier im Kopf als ich den Beitrag verfasst habe: Drei Teaser mit drei Überschriften, drei Texten und drei Buttons. Sowohl die Länge der Überschriften, als auch die Länge der Texte können sehr unterschiedlich ausfallen. Trotzdem sollen die Texte und die Buttons immer auf einer Höhe anfangen, egal wie breit das Display ist. Das Beispiel reagiert jetzt noch nicht auf resize, aber ich denke es ist klar was ich meine.

      • Katja

        Verfasst am 30. September 2015 um 12:38 Uhr.

        Hey Jonas,

        Der Artikel ist wie immer Super! Es ist auf jeden Fall mal eine Variante, die ich mir anschauen werde.

        Bei dem Beispiel, dass du Sven geschickt hattest wird das Div-Element .container nicht geschlossen. ;-)

        Liebe Grüße
        Katja

      • Jonas Hellwig

        Verfasst am 1. Oktober 2015 um 21:36 Uhr.

        Vielen Dank. Ebenso richtig wie jetzt behoben :)

  7. Michael

    Verfasst am 11. Februar 2016 um 10:20 Uhr.

    Hallo das Skript funktioniert super. Hab blos ein kleines Problem mit Eltern div. Das Eltern div hat dadurch keine Höhe. Aus diesem Grund kann ich das nachfolgende Div sehr schwer formatieren.

  8. Roland

    Verfasst am 25. Mai 2016 um 21:32 Uhr.

    Ich habe den Script, der bei einer Größenanderung des Browser die Höhe neu berechnet, in mein Testseite eingebaut und bin begeistert.
    Leider habe ich noch ein Problem. Wenn man das Browserfenster weit zusammenschiebt landen die einzelnen Spalten direkt untereinander. Dies ist so gewünscht. Jetzt sollten die Spalten direkt untereinander stehen, hier ist aber auch ein Abstand entsprechnd der längsten Spalte vorhanden.
    Der Script sollte deshalb erst bei einer Browerbreite von z.B. 600px aktiv werden.
    Kann diese Abfrage noch eingebaut werden? Leider kenne ich mich mit Java überhaupt nicht aus.
    Grüße Roland

  9. Randolf Mayerbuch

    Verfasst am 5. Juni 2016 um 13:34 Uhr.

    Hier mal ein Versuch in CSS/SCSS mit modifizierter Table-cell Methode:
    http://codepen.io/randolfm/pen/qNdxpy

    Mir ging es darum, durch Abstände getrennte Boxen zu erhalten, die sich aber an den Seitenrändern ausrichten und einen unteren Rand besitzen.
    (Bisher nur mit einigermaßen aktuellen Browsern getestet)

  10. Florian Bauer

    Verfasst am 17. Juni 2016 um 20:09 Uhr.

    super unkompliziert. Gefällt mir. Danke!

  11. Karin

    Verfasst am 14. Juli 2017 um 10:35 Uhr.

    Werkle gerade mit joomla 3 local am Template. Generell sind doch in joomla unterschiedliche und verschachtelte divs vorhanden. Kurzum kann man dein Script beim Beitrag „Elemente an der Höhe des höchsten Elements ausrichten“ dahingehend abändern? Also nicht nur für eine Klasse sondern 3. Bei mir sind es von links nach rechts: div.moduletable_ibl, div.blog_start, div.moduletable_ibr. Naja bin kein Profi in Sachen Javascipt. Hab‘ dein Script probiert und .teaser durch .blog_start ersetzt (meine höchste Ausrichtung). Klappte nicht und liegt wohl an joomla durch die erwähnte Verschachtelung? Versuchte css-Lösungen. Die einzigste was bei mir gehen würde ist mit hohen padding-bottom und negativen margin-bottom Werten und dann overflow der umfassenden #wrapper-id. Leider wird unten dann das Design zerschossen. Viele Grüße und danke Karin

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.