nicht angemeldet
CSS Positionierung: Content 100% minus Header und Footer Height
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
-
Kennt vielleicht jemand eine simple Lösung für dieses Problem? Danke für eure Hilfe.
Befrage erneut eine Suchmaschine deiner Wahl mit den Suchbegriffen "sticky footer".
-
Befrage erneut eine Suchmaschine deiner Wahl mit den Suchbegriffen "sticky footer".
Hi,
das Problem bliebt das ContentDiv zwischen Header und Footer welches das Grafische Element zur Verbindung von Header und Footer aufnimmt. Auch bei der Sticky Footer Lösung wird dieser entweder auf 100% des gesamten Browserfensters gestreckt oder aber ich verzichte komplett auf diesen Bereich und wende die Grafikelemente des Diffs auf den Wrapper an. Dann bleibt das Problem das die Verbindungsrahmen des Wrappers hinter dem transparenten Header sichtbar blieben.
Eigentlich sollte height 100% des ContentDiv'st auf die Restgroesse bezogen sein, wirkt sich aber auf die gesamte Fenstergroesse aus. Min-height führt
leider auch nicht zum gewünschten Effekt.Arne
-
das Problem bliebt das ContentDiv zwischen Header und Footer welches das Grafische Element zur Verbindung von Header und Footer aufnimmt.
Du hast noch eine Reihe anderer Elemente die du dafür verwenden kannst - trenne dich von eventuell vorhandemem Tabellendenken. Mit CSS kann etwas ohne Probleme so aussehen als sei es an einer bestimmte Stelle auch wenn es im Dokument völlig wo anders steht.
-
Du hast noch eine Reihe anderer Elemente die du dafür verwenden kannst - trenne dich von eventuell vorhandemem Tabellendenken. Mit CSS kann etwas ohne Probleme so aussehen als sei es an einer bestimmte Stelle auch wenn es im Dokument völlig wo anders steht.
Hi,
Danke! habs mittlerweile mit einem Div geloest das nur den Rahmen zeichnet.
Stimmt, bis jetzt habe ich noch in verschachtelten DIV's alla Tables gedacht.Arne
-
-
-