✔ Wieder mal DIV-Layout

[melzer]

Hallo. Habe folgendes Problem bei einem div-Layout (Bin dabei tabellenfrei zu werden):

im Div-Layout habe ich einen Header.

Dann zwei Spalten für ein Seitenmenü und den Content.

Hier kommt der Clou: bekomme es einfach nicht hin, dass der Content-Bereich eine Höhe von 100% bekommt. - bzw. schon, aber dann wird genau die Höhe des Header-Bereichs unten "rangehängt".

Dh. ist der Header (z.B. einfach nur ein Bild) z.B. 100px hoch, dann wird nach Seitenende eine 100px lange freie Fläche produziert und ein unnötiger Scrollbalken wird eingefügt.

Kennt das jemand? Kann mir da jemand helfen?

Hier mal der Code:

<div id="hauptbox">
	
	<div id="header"> 
             <img src="test.gif" height="100" border="0"> 
        </div>

	<div style="float: left; height:100%; background:url(spalte_left_bg.jpg); bottom: 0;">
		LINKES MENÜ
	</div>
	
	<div style="width:70%; float: left;">
		MAIN-CONTENT
	</div>

</div>

Und hier noch das CSS dazu:

html, body {
height: 100%; /* wichtig für div-layout */
}

#hauptbox{
min-height: 100%;
position: relative;
height: auto !important; /* moderne Browser */
height:100%; /* IE */
}

#header {
top: 0; /* wichtig */
}

Danke im Vorraus...

 

[Maik]

Hi,

verwende das DIV hauptbox mit seiner 100%-Höhe und binde darin ein Hintergrundbild ein, das den Hintergrund für die beiden Spalten erzeugt. Somit entfällt dann auch in der linken Spalte das Hintergrundbild spalte_left_bg.jpg.

Zum Einrichten der Mindesthöhe muß die position:relative-Deklaration aus dem "Block" genommen werden - also:

#hauptbox{
position: relative;
min-height: 100%;
height: auto !important; /* moderne Browser */
height:100%; /* IE */
}

 

[melzer]

Hey, Danke für die fixxe Antwort.

Hatte das auch schon im Kopf...
Na dann muss wohl doch ein Riesen-JPEG als Hintergrund hinhalten müssen

 

[Maik]

So riesig fällt die Grafik eigentlich nicht aus, da sie je nach Hintergrundbeschaffenheit (Uni-Farbe, Muster) nur einen bis wenige Pixel hoch sein muß, und mit background-repeat:repeat-y senkrecht wiederholt wird.

 

[melzer]

Daaamn ... wo du Recht hast, hast du Recht ;-)

Danke...