Höhe von HTML-Elementen automatisch anpassen – mit jQuery und Javascript
Oft kommt es vor, das man zwei oder mehr Elemente, sei es nun ein Layer, Bild oder was auch immer, mit gleicher Höhe darstellen will. Das stellt bei statischen Inhalten überhaupt kein Problem dar, gibt es doch die schöne CSS-Eigenschaft height.
Was aber, wenn wir dynamische Inhalte darstellen wollen und gar nicht wissen wieviel Inhalt wir pro Element bekommen. Bei Texten, längeren Namen or whatever aus einer Datenbank ist dies oft der Fall. Durch den unterschiedlich langen Inhalt werden die Elemente nun dementsprechend anders hoch dargestellt. Das sieht bei Elementen die wir nebeneinander zeigen möchten meistens ziemlich doof aus.
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.
Hola! Ich bin Nico und du liest gerade meinen Blog über Webentwicklung, Webdesign, Linux und alles was mit dem Internet zu tun hat. Seit 1997 entwickle ich Websites und habe in dieser Zeit in den verschiedensten Bereichen gearbeitet. Ob nun Webdesign, Software-Entwicklung, Server-Administration, Marketing und SEO, alles macht Spaß und ergänzt sich wunderbar. Neben diesem Blog betreibe ich noch diverse andere Projekte wie zum Beispiel die