Gleich hohe Spalten: Slider - Newsbox

[scroll]

Hallo,

ich habe ein Layoutproblem das ich hier mal nachgestellt habe: Link entfernt

In der linken Box läuft ein Slider.
In der rechten Box wird eine News kurz angerissen mit Weiterlesen-Link. Diese Box erhält immer das aktuelle Bild der News als Hintergrundbild.
Natürlich ist der Inhalt der rechten Box flexibel, es sind nur einige Zeilen Text. Somit wird auch immer nur ein Teil des Hintergrundbilds angezeigt.
Ich möchte jetzt erreichen das die Boxen immer gleich hoch sind, also das Hintergrundbild in der rechten Box komplett angezeigt wird, sich aber auch responsive verhalten.

Habe mir schon die Finger wund gesucht, aber leider keine funktionierende Lösung gefunden.
Gibt es eine Möglichkeit?

Gruß Michael

[folkfreund]

Hallo Michael,

solange die linke Seite durch die Prozentangabe flexibel ist, kannst du ja auch die Höhe nicht vorhersagen. Das wird dann schwierig.

Unter der Annahme, dass die linke Seite tatsächlich immer 600x400px groß ist, kannst du die rechte Seite durch

min-height:400px;

auf die richtige Höhe bringen.
Was machst du, wenn der Inhalt mal länger ist? Oder der Besucher eine größere Schrift wählt? Oder...

Und wie soll es dann sein, wenn beide Blöcke untereinander dargestellt werden? Was passiert dann mit dem Hintergrundbild?
Da musst du dann sicher per Mediaquery noch was anpassen.
Gleiche Höhe ist ansonsten aber schon lange eine immer wieder diskutierte Herausforderung, die meistens mit Javascript gelöst wird.

Viel Erfolg ;-)
folkfreund

[kleppi]

Hallo Michael,

ich habe das mit Javascript gelöst:

<script type="text/javascript">
function setheight()
	{
        h = document.getElementById("container").offsetHeight;				// Höhe von "container ermitteln"
	main = document.getElementById("main").getElementsByClassName("inside")		// div "inside" in "main" ermitteln (Array)
	left = document.getElementById("left").getElementsByClassName("inside")		// div "inside" in "left" ermitteln (Array)
	main[0].style.height=h + "px";							// "main" höhe setzen
	left[0].style.height=h + "px";							// "left" höhe setzen

	}

window.onload = setheight;

</script>

Gruß Klaus