Naja du hattest ja ursprünglich 2 Probleme/Anforderungen:- #left und bestimmter Inhalt sollen mindestens so hoch sein wie das Browserfenster
- #left und bestimmter Inhalt sollen immer gleich groß sein
Mit min-height:100vh; löst du ersteres, aber zweiters ist dann immer noch offen. Beispiel für ein einfache jQuery Variante (nur wenig getestet):
PHP-Code:
(function($)
{
$(document).ready(function()
{
var boxHeight = $('.box').first().height();
var leftHeight = $('#left').height();
if( boxHeight > leftHeight )
$('#left').css( 'height', boxHeight+'px' );
else
$('.box').first().css( 'height', leftHeight+'px' );
});
})(jQuery);
In das JavaScript könntest du dann auch noch gleich den Viewport abfragen, dann erübrigt sich das min-height:100vh; (oder als Zusatz für ältere Browser).
Allerdings würde ich deinen Aufbau etwas umbauen. Der Hintergrund, der sich bei dir über die ganze Seite erstrecken soll, wird über .box definiert, und diese Klasse gibst du einen Artikel, je nach Bedarf. Ich würde den Hintergrund lieber #main geben und über Seiten-Klassen steuern, wo der Hintergrund erscheinen soll oder nicht.
Lesezeichen