(zuletzt bearbeitet )

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.

Werbung

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? Das wäre jedenfalls sehr nett! :-)

Div Bereiche mit unterschiedlicher Höhe angleichen

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:

Div Bereiche gleiche Höhe per Hintergrund

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 😉

Andere Beiträge, die auf diesen Beitrag verlinken

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten