Div height 100% überschreitet parent div

[Sebastian]

Hallo,
ich versuche gerade ein 3-Zeilen Layout umzusetzen.
---------------
| Banner
|Menu | Content
| Footer
---------------
Die Gesamthöhe soll dem anzeigbaren Bereich entsprechen.
Es sollen also keine Scrollbars rechts am Browser auftreten. Nur beim Content soll über overflow:scroll gescrollt werden.
Ich versuche es mit verschachtelten div,
beiße aber irgendwie auf granit:

<div class="container">
 <div class="header">
  Header
 </div>
 <div class="left">
  Menu
 </div>
 <div class="content">
  Content
 </div>
 <div class="footer">
  Footer
 </div>
</div>

mit folgendem CSS:

html, body {
 margin: 0px;
 padding: 0px;
 height: 100%;
}

.container {
 width: 850px;
 height: 100%;
 border: 1px solid blue;
}

.header {
 margin-top: 25px;
 width: 850px;
 height: 180px;
 border: 1px solid black;
}

.content {
 height: 100%;
 overflow: scroll;
 border: 1px solid red;
}

.menu {
 float:left;
 width:200px;
 border: 1px solid green;
}

.footer {
 height: 50px;
 background-color: #aaa
}

Was aber passiert ist, dass height: 100% im content dazu führt, dass die gesamte bildschirmhöhe genutzt wird und nicht 100% vom übergeordneten div "container" - zu erkennen an der roten umrandung die die blaue schneidet.
Ich verliere gerade den Durchblick und stehe mächtig auf dem Schlauch.
Wie bekomme ich "content" auf 100% der höhe von "container"?

[Powl]

Hallo,

.container {

position:relative;

width: 850px;
height: 100%;
border: 1px solid blue;
}

Wie bekomme ich "content" auf 100% der höhe von "container"?

Indem Du "container" positionierst. % bezieht sich immer auf das nächste Elternelement, das _nicht_ wie der Standard (static IIRC) positioniert ist.
Statt .container würde ich eher eine ID vergeben, da es ja ein einmalig auftretendes Element ist, und keine Klasse in dem Sinn. Da wäre meiner Meinung nach eine ID sinnvoller.

netten Tag
^da Powl