CSS-Layout: Hintergrundbild über Seitenhöhe

[CrazyWolf]

Hallo,

ich hab da ein kleines Problem mit einem CSS Layout.
Folgendes Konstrukt:

<div id="page">
 <div id="header">
  $header
 </div>
 <div id="menu">
  $menu
 </div>
 <div id="content">
  $content
 </div>
</div>

CSS sieht mal nach anfänglichen Versuchen so aus:

body {
 margin: 0px;
 padding: 0px;
}
#page {
 width: 100%;
 height: 100%;
}
#header {
 width:100%;
 height:100px;
}
 
#menu {
 float: left;
 width: 155px;
 height: 100%;
}
#content {
 margin-left: 170px;
 float:right;
}

Der Header ist 100 Pixel hoch.
Im Menü hab ich ein Hintergrundbild eingefügt. Jetzt will ich dieses Hintergrundbild über die ganze Höhe des Menüs, also bis ganz unten auf die HTML Seite.
Er schneidet es aber ab wenn kein Text mehr im Menü is.
Oder wenn ich 100% angebe, nimmt er 100% der Höhe + die Höhe des Headers, und man muss scrollen wo es eigentlich nicht nötig ist.
Kann mir jemand sagen wie ich problemlos den Verlauf über die ganze linke Seite bekomme?

Möchte ein Ergebnis wie z.B: das:

<table height="100%" width="100%">
 <tr>
  <td height="100px" colspan="2">$header</td>
 </tr>
 <tr>
  <td height="100%">$menu</td>
  <td height="100%">$content</td>
 </tr>
</table>

Ich hab mich schon durchs Web gewühlt, finde aber nirgens die passende CSS Formatierung.
Kann mir vielleicht jemand auf die Sprünge helfen?

Danke und Gruß,
Andreas

 

[ExtiQ]

habs net getestet.. aber vielleicht gehts mit sowas:

div#menu
{
position:absolute;
bottom:0px
float:left;
width: 155px;
}