Höhe von HTML-Elementen automatisch anpassen – mit jQuery und Javascript

22. September 2010 von Nico Puhlmann

Oft kommt es vor, dass man zwei oder mehrere Elemente nebeneinander in gleicher Höhe darstellen möchte. Das stellt bei statischen Inhalten überhaupt kein Problem dar, gibt es doch die schöne CSS-Eigenschaft height.

Was aber, wenn wir dynamische Inhalte – beispielsweisse Texte aus einer Datenbank – verwenden und vorher gar nicht wissen, wieviel Inhalt jedes einzelne Element enthält? Durch den unterschiedlich langen Inhalt werden die Elemente jeweils auch unterschiedlich hoch dargestellt, was in den meisten Fällen unschön aussieht.

Hier kann das Javascript-Framework jQuery helfen. jQuery bietet eine Funktion mit dem Namen .height(), die uns die Höhe eines Elements setzen oder auslesen kann. Hier wird nicht einfach die CSS-Eigenschaft height ausgelesen, sondern die fertig gerenderte Höhe des Elements. So braucht man mit jQuery nicht viel Mühe, um alle gewünschten Elemente zu durchlaufen, das höchste zu bestimmen und alle Elemente auf eben diese Höhe anzupassen.

Der HTML-Code

Gehen wir von folgendem HTML-Code aus. CSS habe ich zur besseren Ansicht inline definiert:

Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein. Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein. Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein. Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum Testen schreib ich hier irgendwas rein.

Das Javascript mit jQuery

Zuerst müssen wir die Höhe des höchsten Div’s ausfindig machen, indem wir alle Elemente durchlaufen. Dazu müssen wir uns den höchsten Wert einfach nur merken und immer vergleichen:

/* Variable zum Merken der maximalen Höhe */
var max_height = 0;

/* alle Elemente mit der CSS-Klasse "autoheight" durchlaufen */
$('.autoheight').each(function(e) {

  /* Höhe des aktuellen Elements */
  h = $(this).height();

  /* Wenn Höhe erfolgreich bestimmt werden konnte */
  if(typeof(h) != "undefined") {

        /* Wenn aktuelle Höhe gösser unserer maximalen, Höhe merken */
        if(h > max_height) {
                max_height = h;
        }
  }
});

Nun müssen wir die Höhe aller Elemente auf den gefundenen Wert setzen:

if(max_height > 0) {
 $('.autoheight').height(max_height);
}

Das ganze Javascript sieht dann so aus:

var max_height = 0;
$('.autoheight').each(function(e) {
  h = $(this).height();
  if(typeof(h) != "undefined") {
        if(h > max_height) {
                max_height = h;
        }
  }
});
if(max_height > 0) {
 $('.autoheight').height(max_height);
}

Das fertige Ergebnis als Beispiel

Das oben beschriebene Beispiel sollte dann in etwa so aussehen:

Boxen original

Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.

Boxen mit jQuery angepasst

Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.

Sieht doch gleich viel besser aus. Jetzt können wir das natürlich auf alle gewünschten Elemente anwenden. Optimal für tabellarische Darstellung mit Layern.

Dir gefällt dieser Beitrag?
Erhalte Updates. Kostenlos.

8 Kommentare

  • Kannst du den kompletten Quelltext am Stück veröffentlichen?
    Bekomme es irgendwie nicht hin..
  • Danke für dieses sehr hilfreiche Tutorial.
  • @ToM80 Danke für den Hinweis. Der Artikel ist dem Relaunch zum Opfer gefallen. jQuery wurde falsch angesprochen. Ist gefixt.

    @Gerrit @Pascal Danke für Eure Tipps! outerHeight ist wirklich besser.
  • Die Funktion scheint nicht mehr zu funktionieren. Im aktuellen Firefox (16.0.2) sehen beide Ansichten identisch aus.
  • Eine weitere möglichkeit ist dem wrapper ein Background-Image zu geben welches 1px hoch ist und repeat-y hat...
  • Ich würde nicht .height() verwenden um die höhe zu ermitteln sondern .outerHeight() (http://api.jquery.com/outerHeight/) der vorteil: Outerheight schliesst ebenfalls padding und border ein (falls gar margin benötigt wird kann man dies mit .outerHeught(true) ermitteln!
  • Noch ein Vorschlag:
    Nimmt einfach den Eltern-Container um die max_height zu ermitteln. Dann braucht es keine Schleife die alle Kinder nach der Höhe abfragt.

    $('ul#autoheight li').height($('ul#autoheight').height());
  • Sehr cool. Habe ich in ähnlicher Form auch schon verwendet, um etwas auf exakt 100% Höhe (Monitor) auszurichten. Kann diese Vorgehensweise nur jedem empfehlen.

    Viele Grüße
    lastactionseo

Was denkst du?