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:
mit folgendem CSS:
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
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>
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 }
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
Comment