Höhe von HTML-Elementen automatisch anpassen – mit jQuery und Javascript
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.
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.
Bekomme es irgendwie nicht hin..
@Gerrit @Pascal Danke für Eure Tipps! outerHeight ist wirklich besser.
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());
Viele Grüße
lastactionseo
Was denkst du?