ich hab ja schon einiges gegoogelt, doch bezüglich dem derzeit habe ich ein CSS Layout, was ich nicht
Derzeitiges Problem:
Ich habe einen übergeordneten "wrapper", der eine dynamische breite hat und in dem drei elemente sind: header, menu und content.
header und menu sollen eine feste höhe haben, den rest davon (also der content) soll eine dynamische höhe bis zum ende des (browser-)fensters haben.
beim header und menu ist derzeit alles ok, aber der content will nicht ganz so.
hier sind die code-schnipsel die ich bislang gebaut habe:
Code: Alles auswählen
html, body {
margin: 0;
padding: 0;
height: 100%;
color: #bbb;
background-color: #161616;
}
#wrapper {
background-color: #FFFFFF;
width: 90%;
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */
}
#header {
min-height: 100px;
height: 100px;
text-align: left;
background-color: red;
}
#menues {
min-height: 40px;
height: 40px;
text-align: left;
background-color: blue;
}
#content {
height: auto;
text-align: left;
background-color: green;
}
Code: Alles auswählen
<body text="#000000" bgcolor="#FFFFFF">
<div id="wrapper">
<div id="header"> </div>
<div id="menues"> </div>
<div id="content"> </div>
</div>
</body>
Wenn ihr beides mal eben als css+html speichert und euch anzeigen lasst, wird in der html-seite erscheinen: der "header" und das "menues".
Der "content" ist nämlich nicht weiß (das ist der "wrapper") sondern grün!
Mein Testbrowser ist derzeit FF11, auf den IE kann ich mich ja nicht so ganz verlassen, da der ziemlich lasch mit den CSS Regeln umgeht.
Üblicherweise wird ja der Parent-Wert genommen, also habe ich irgendwo einen Denkfehler, wie ich hier zum Ziel kommen kann.
Es gibt hier doch bestimmt den ein oder anderen, der mich hier auf den grünen Zweig bringen kann?!
Für jede Hilfe bin ich dankbar!
edit:
ich habe mal kurz mein konzept neu skizziert und hochgeladen. der footer (gelb) soll quasi mit dem content abschliessen, so daß eine riesige box zentral ist, die scrollbar ist. (und nein, kommt mir gar nich erst mit frames oder iframes, das muss mit CSS realisierbar sein :) )
Gruß
Soulprayer