Hat jemand eine zündende Idee, wie man den DIV 'leftcolumn' auf 100% Höhe bekommt?

Hier das Live-Beispiel:
http://nhoj.nh.funpic.de/

Such mal nach Faux Columns ... das ist kein triviales Problem.

Funktionieren in dem Fall nicht, weil der Background, der in der linken Spalte am unteren Rand platziert werden soll, sich nicht wiederholt.

Was verstehst Du denn in diesem Fall unter "100%"? Immer so hoch wie der Content?

Du kannst leftcolumn zur Not absolut positionieren in mainrow (die ihrerseits dazu position: relative; kriegt)

#leftcolumn {
position: absolute;
bottom: 0;
height: XXpx;
}

Dann gibst Du noch der maincolumn ein margin-left so breit wie leftcolumn, dann sollte es gehen. maincolumn darf dann aber nie kürzer sein als XXpx (könntest du dann mit min-height festlegen, für IE6 mit height).

Hi,

CSS-Layout mit 100%-Höhe zeigt anhand von vier Beispielen, wie's geht.

mfg Maik

Hatte ich schon gelesen, passt in diesem Fall aber auch nicht.

So sollte es aussehen: http://nhoj.nh.funpic.de/index_original.htm

Leider klebt bei einem DIV Layout das Hintergrundbild in der linken Spalte direkt unter den Buttons und nicht am unteren Ende der Spalte wie beim Tabellen Layout.

Zitat von nhoj

Hatte ich schon gelesen, passt in diesem Fall aber auch nicht.

Da der Thread als erledigt markiert ist, soll's mir auch recht sein.

Zitat von nhoj

Leider klebt bei einem DIV Layout das Hintergrundbild in der linken Spalte direkt unter den Buttons und nicht am unteren Ende der Spalte wie beim Tabellen Layout.

Ich seh da keinen Unterschied zwischen den beiden Layoutkonzepten (Tabelle vs. DIVs), was die Position des Hintergrundbildes http://nhoj.nh.funpic.de/Bilder/design5abc_08.gif für die linke Spalte #leftcolumn betrifft.



mfg Maik

Scroll in deinem Browser mal nach unten.

In deinem CSS-Modell lässt sich nur das Elternelement #rootcontainer im Browserfenster in der Höhe auf 100% strecken.

Alle weiteren 100%-Höhenangaben führen zu Fehldarstellungen, denn wenn das Nachfolgeelement #maincolumn und/oder #leftcolumn auf 100% gestreckt wird, ist die Seite zumindest schon mal um das Höhenmaß des Headerbereichs scrollfähig, und das bei "Null Seiteninhalt".

mfg Maik

Wenn du die Aufteilung der Slices restrukturierst, lautet die Lösung:

Code css:

1 2 3 4 5 6 7 8 9 10 11

#mainrow {         float:left;         width:978px;         min-height:410px;         height:auto !important;         height:410px;         padding:32px 0px 0px 0px;         background-image:url(Bilder/design5abc_20.gif);         background-repeat:no-repeat;         background-position:left bottom; }

mfg Maik