olli: min-height Problem

Beitrag lesen

Hi,

hier ist mein Code:

CSS:

body, html { height:100%; margin:0; }  
#out { background:red; min-height:100%; width:850px; margin:auto; }  
#content { background:yellow; min-height:100%; width:800px; margin:auto; }

HTML:

<div id="out">  
 <div id="content">Lorem ipsum dolor sit amet...</div>  
</div>

Beide Divs (out und content) sollen immer mindestens die gesamte Bildschirmfläche einnehmen und bei vielem Inhalt mitwachsen. Dies erreiche ich mit min-heigt:100%.

Mein Problem: Nur der äußere Div (out) nimmt mindestens die gesamte Bildschirmfläche ein, der andere (content) ist nur so hoch wie der Text selbst. Wenn ich jetzt den Div "out" auf height:100% setze, nehmen beide Divs Höhe 100% ein (so wie ich das will), doch wenn jetzt sehr viel Inhalt vorhanden ist, wächst der äußere Div nicht mit (was wiederum unschön ist).

Hier habe ich ein Screenshot gemacht, der gelbe Bereich soll wie der rote den kompletten Bildschirm füllen und bei größerem Inhalt mitwachsen:

http://www.bilder-hochladen.net/files/6lnd-9-jpg.html

Danke für eure Hilfe,
olli