min-height Problem

[olli]

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

[ChrisB]

Hi,

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.

Ja, min-height:100% "funktioniert" "nur ein Mal". Du kannst keine wechselseitige Beziehung verschachtelter Elemente damit ausdruecken.

MfG ChrisB

[olli]

Ja, min-height:100% "funktioniert" "nur ein Mal". Du kannst keine wechselseitige Beziehung verschachtelter Elemente damit ausdruecken.

Und wie löse ich dann das Problem? Hast du einen Vorschlag?

[ChrisB]

Hi,

Und wie löse ich dann das Problem?

Das kann ich dir nicht sagen, ohne dass du erst mal die Aufgabenstellung transparent beschreibst - was moechtest du *erreichen*?

MfG ChrisB

[olli]

Das kann ich dir nicht sagen, ohne dass du erst mal die Aufgabenstellung transparent beschreibst - was moechtest du *erreichen*?

OK, ganz einfach:
Beide Divs sollen IMMER 100% Höhe haben und bei größerem Inhalt sich automatisch anpassen.

Wenn ich beiden Divs min-height:100% gebe funktioniert das ja nicht, wie du es auf dem Screenshot siehst.

Danke für deine Bemühung,
olli

[ChrisB]

Hi,

Das kann ich dir nicht sagen, ohne dass du erst mal die Aufgabenstellung transparent beschreibst - was moechtest du *erreichen*?

OK, ganz einfach:

Offenbar nicht.

Beide Divs sollen IMMER 100% Höhe haben und bei größerem Inhalt sich automatisch anpassen.

Ich fragte, was du *erreichen* willst, also welchen Effekt, vom Aussehen her - dann kann man vielleicht Alternativen finden.
Ich fragte *nicht* danach, wie du das bisher versucht hast, erst recht nicht nach der Wiederholung dessen.

Wenn ich beiden Divs min-height:100% gebe funktioniert das ja nicht, wie du es auf dem Screenshot siehst.

Das war mir auch ohne Screenshot schon klar.

MfG ChrisB

[Ingo Turski]

Hi,

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; }

Du willst also - bei ausreichend breitem Fenster - 800px in der Mitte gelb haben und links und rechts davon einen \*Rahmen\* von jeweils 25px haben? Dazu reicht doch auch ein Element aus!  
  
Übrigens: diese Farben beißen sich mit der bei mir voreingestellen Hintergrundfarbe...  
  
freundliche Grüße  
Ingo

-- 
[[barrierefrei Ingo Webdesign](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html) | [IE7 - Bugs](http://www.1ngo.de/web/ie7.html)]