Tweet
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
Kommentar