Div Container komplette Seite (+ggf. Scrollbalken) einnehmen

[Klaus]

Hallo,
ich möchte ein zwei Spaltenlayout mit div-Container erstellen, allerdings muss der linke Container über die gesamte Seite gehen (und auch immer dargestellt werden).
Ein normales height:100% funktioniert leider nicht.

Also was ich möchte:
Würde man dies mit Tabellen lösen, sähe das ganze so aus:

<table width="100%" height="100%">
<tr>
<td bgcolor="red" width="150">Linke Spalte</td>
<td>Rechte Spalte</td>
</tr>
</table>

Dort ist im Browser die gesamte linke Seite der Seite rot, egal wie viel Text in der rechten Spalte steht.

Wenn in der rechten Spalte nur sehr wenig Text steht, dann ist dennoch die gesamte linke Bildschirmseite rot.
Steht in der rechten Spalte aber sehr sehr viel Text, so dass man scrollen muss, bleibt dort das rot enthalten.

Nun wollte ich dies mit CSS nachbauen:
<div id="wrap">
<div id="links">Linke Spalte</div>
<div id="rechts">Rechte Spalte</div>
</div>

CSS:
html, body { height: 100%; }

#links {
    display:block;
    float: left;
    height: 100%;
    background: red;
    width:150px;
}

#rechts {
    margin-left: 150px;
}

Das Problem ist, zwar ist die linke Hälfte komplett rot ausgefüllt, scrollt man aber weiter runter (da in der rechten Spalte zuviel Text steht), dann hört das rot der linken Spalte auf und man sieht die weißen Hintergrund.

Weiß jemand, wie man dieses Problem löst?

Ich habe schon diverse Artikel (durch Google gefunden) durchgelesen, keiner hat aber noch wirklich weitergeholfen oder ich hatte andere unangenehme Nebeneffekte, z.B. dass dort Scrollbalken entstanden obwohl keine Nötig waren, da die Seite noch rund 50px länger war.

Wäre echt klasse, wenn mir jemand helfen könnte.

Grüße
Klaus

[ChrisB]

Hi,

ich möchte ein zwei Spaltenlayout mit div-Container erstellen, allerdings muss der linke Container über die gesamte Seite gehen (und auch immer dargestellt werden).
Ein normales height:100% funktioniert leider nicht.

<div id="wrap">
<div id="links">Linke Spalte</div>

Wenn du #wrap keine Hoehe zuweist, kannst du nicht erwarten, dass die 100% von html und body weiter hinunter "vererbt" werden.

Das Problem ist, zwar ist die linke Hälfte komplett rot ausgefüllt, scrollt man aber weiter runter (da in der rechten Spalte zuviel Text steht), dann hört das rot der linken Spalte auf und man sieht die weißen Hintergrund.

Du willst ja auch eigentlich keine 100% Hoehe, sondern Mindesthoehe.
MfG ChrisB

[Klaus]

Hallo,

Wenn du #wrap keine Hoehe zuweist, kannst du nicht erwarten, dass die 100% von html und body weiter hinunter "vererbt" werden.

ja das ist mir auch aufgefallen, als ich den Beitrag abgesendet habe.
#wrap hat natürlich auch die Höhe von 100%

Das Problem ist, zwar ist die linke Hälfte komplett rot ausgefüllt, scrollt man aber weiter runter (da in der rechten Spalte zuviel Text steht), dann hört das rot der linken Spalte auf und man sieht die weißen Hintergrund.

Du willst ja auch eigentlich keine 100% Hoehe, sondern Mindesthoehe.

Das Problem ist, dass der IE6 dieses leider nicht richtig umsetzt.

Und die linke Spalte muss sich der rechten Spalte in der Höhe anpassen, d.h. wenn viel Text in der rechten Spalte steht, muss auch beim Scrollen der linke Bereich immer Rot sein.
Steht in der rechte Spalte aber nichts, muss die gesamte Seite mit roter Farbe ausgefüllt sein.

Ich hoffe mein anliegen ist verständlich.

Grüße
Klaus

[ChrisB]

Hi,

Du willst ja auch eigentlich keine 100% Hoehe, sondern Mindesthoehe.
Das Problem ist, dass der IE6 dieses leider nicht richtig umsetzt.

Da der IE6 aber bekanntlich height faelschlicherweise wie min-height interpretiert, glaenzt dieses Problem durch Nichtexistenz.

Und die linke Spalte muss sich der rechten Spalte in der Höhe anpassen

Stichwort: Faux Columns.

MfG ChrisB