Wie oft wurde mir diese Frage schon gestellt! 😁
Verschiedene Div-Bereiche, nebeneinander positioniert, sollen die gleiche Höhe bekommen - ein typisches Problem, nicht nur beim Erstellen von Drei-Spalten-Layouts.
Werbeblocker aktiv?
Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂
Die beste Lösung, die mir bekannt ist, ist es, per Javascript sämtliche Höhen zu prüfen und nachträglich alle Bereiche auf die größte, vorkommende Höhe anzupassen. Besonders gut geht das mit jQuery, wie css-tricks.com beschreibt. Tolles Tutorial, sehr zu empfehlen. 😉
Alternativ kann man auch sämtliche Div-Bereiche einer Zeile in ein weiteres Div packen und diesem ein passendes Hintergrundbild sowie eine konstante Höhe verpassen. Das Hintergrundbild ahmt quasi eine gleichmäßige Höhe nach. Die einzelnen Div-Bereiche behalten ihre "zu kleine" Höhe (ausgenommen das höchste Div) und werden auf der Grafik passend positioniert.
Beispiel:
Die roten Rahmen stellen verschiedene Div-Bereiche dar. Der äußere, rote Rahmen ist das Div, welches als Hintergrundbild die Grafik mit weißen Hintergrund und darauf gelben Boxen erhält und eine konstante Höhe hat.
Die drei Div-Bereiche, die dieses äußere Div enthält, haben unterschiedliche Höhen. Dies erkennt man jedoch aufgrund des Hintergrundbildes nicht. 😉
Hinweis: Wenn der äußere Div-Bereich keine konstante Höhe besitzen soll, so empfehle ich, die komplette Hintergrundgrafik mit der Höhe 1 Pixel per CSS in Y-Richtung passend wiederholen zu lassen.
Wie ich finde zwei praktikable Lösungen 🙂 Wenn ihr noch mehr kennt, freue ich mich über Kommentare 😉