Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 03-10-2007, 14:42
BAsti86
 Newbie
Links : Onlinestatus : BAsti86 ist offline
Registriert seit: May 2005
Ort: bei Magdeburg
Beiträge: 4
BAsti86 ist zur Zeit noch ein unbeschriebenes Blatt
BAsti86 eine Nachricht über ICQ schicken
Standard Div height 100% überschreitet parent div

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:
Code:
<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:
Code:
 
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"?
Diverse "position:relative" ändern gar nichts, den Tipp solltet ihr also bitte vorher ausprobieren ob er funktioniert, wenn ihr mir dazu raten wollt
Denke ihr könnt mir helfen - Danke
Mit Zitat antworten