nicht angemeldet
Hallo,
ich habe eine Frage bezüglich CSS. Viele werden den Kopfschütteln und sagen gibt dies oder jenes bei google ein, aber leider funktionierte bisher alles nicht so wie ich es für meine Lösung brauche. Also es geht um Positionierung von Header, Footer und einen Contentbereich von 100% height.
Sollte eigentlich ganz simple sein, doch es kam anders....
Zum warm werden ein bisschen Code:
html,body {
margin:0;
padding:0;
height:100%;
font-family:verdana;
}
div#container {
position:relative;
margin:0 auto;
width:818px;
height:auto !;
height:100%;
min-height:100%;
}
div#header {
padding: 0em;
width:818px;
height:140px;
background-image:url(../images/top.png);
background-repeat:no-repeat;
}
#navcontainer {
float:right;
width: 430px;
margin:117px 0 0 0;
padding:0 10px 0 0;
height: 15px;
font-family:Arial, Helvetica, sans-serif;
color:#DAEAFC;
font-size:14px;
text-align: right;
}
#navcontainer a {
color:#DAEAFC;
text-decoration:none;
border:none;
padding-right: 10px;
}
div#content {
background-image:url(../images/mid.png);
background-repeat:repeat-y;
min-height: 100%;
}
div#footer {
position:absolute;
bottom:0;
width:818px;
height:70px;
background-image:url(../images/bottom.png);
background-repeat:no-repeat;
}
der entsprechende HTML code sieht folgendermassen aus:
<body>
<div id="container">
<div id="header">
<div id="navcontainer">Navigation....
</div>
</div>
<div id='content'>Some content.....
</div>
<div id='footer'>A simple footer....
</div>
</div>
</body>
</html>
Der Footer soll bei leerem Content am unteren Browserfenster erscheinen und bei gefülltem Content-Bereich nach unten wandern. Soweit funktioniert es. Mein Problem ist der Contentbereich selbst. Dieser soll selbst wenn kein Inhalt in diesem Bereich ist, 100% betragen also den Platz zwischen Header und Footer ausfüllen. Im Content-Bereich gibt es ein Hintergrundbild welches als linker und rechter Rahmen den Header mit dem Footer verbindet. Ist der Content-Bereich jedoch kleiner als 100% verbindet der Rahmen den Header nicht mit dem Footer. Also muss ich irgendwie bewerkstelligen das der Content Bereich 100%, ABER 100% minus Header und Footer. Eigentlich dachte ich, das die 100% vom umfassenden Container dies lösen sollten aber sobald ich Content auf height/min-height: 100% einstelle, nimmt sich dieser Bereich wirklich 100% des sichtbaren Browserfensters und nicht 100% - Footer-height - Header-Height. Da Header und Footer Hintergrundbilder selber einen transparenten Rahmen haben, kann ich das Content-Hintergrundbild nicht auf den ContainerDiv anwenden, weill ich dann einen Rahmen habe der über den Header hinaus und unter dem Footer noch sichtbar ist. Kennt vielleicht jemand eine simple Lösung für dieses Problem? Danke für eure Hilfe.
Arne