Hi!
Ich hab ein ziemlich blödes und anscheinend auch geläufiges Problem in meinem CSS Layout. Es geht um die Höhe des Contents, welcher sich einfach nicht auf 100% Höhe des Fensters strecken möchte. Ich google bestimmt schon seit 8 Uhr heute morgens nach dem Problem und bin auch schon auf Seiten hier verlinkt worden aber irgendwie bringt mich das alles nicht weiter, wesshalb ich es jetzt mit einem eigenen Thread versuche.
Also ich habe ein zentriertes Layout mit einer fixen Breite, welcher einen Header, einen Container mit 2 Navigationen und dem Content und einen Footer beinhaltet. Der Footer klebt bei kurzem Inhalt schön am Boden und bei längerem Inhalt streckt es sich mit.
Ich habe das ganze mal grob neu geschrieben:
Das Stylesheet schaut folgendermaßen aus:
Ich habe aus dem div#content das min-height: 100%; entfernt, da es sowieso nicht geht und damit die Navigation wenigstens sichtbar ist stehen dort 50px angegeben. Bestenfalls sollen die Navigationen ebenfalls 100% Höhe haben, so dass sich deren Hintergrund auf der Seite erstreckt.
Das ganze will jetzt einfach nicht und laut diversen Foren ist es auch nicht möglich. Stimmt das? Wenn ja was soll ich machen? Ich hab irgendwie aufgeschnappt, dass es mit Javascript möglich ist aber die Seite soll eigentlich ohne JS auskommen. Soll ich das in Tabellen machen? Hoffentlich nicht :l
Die eigentliche Seite ist schon recht komplex gecodet und eine Designänderung würde zuviel Zeit in Anspruch nehmen. Also bitte helft mir :l
g
PS: Hier ein Link auf das obige Beispiel http://www.oneted.de/sites/styletest.htm
Ich hab ein ziemlich blödes und anscheinend auch geläufiges Problem in meinem CSS Layout. Es geht um die Höhe des Contents, welcher sich einfach nicht auf 100% Höhe des Fensters strecken möchte. Ich google bestimmt schon seit 8 Uhr heute morgens nach dem Problem und bin auch schon auf Seiten hier verlinkt worden aber irgendwie bringt mich das alles nicht weiter, wesshalb ich es jetzt mit einem eigenen Thread versuche.
Also ich habe ein zentriertes Layout mit einer fixen Breite, welcher einen Header, einen Container mit 2 Navigationen und dem Content und einen Footer beinhaltet. Der Footer klebt bei kurzem Inhalt schön am Boden und bei längerem Inhalt streckt es sich mit.
Ich habe das ganze mal grob neu geschrieben:
HTML:
<body>
<div id="page">
<div id="header"></div>
<div id="container">
<div id="navi_left"></div>
<div id="navi_right"></div>
<div id="content">text</div>
</div>
<div id="footer"></div>
</div>
</body>Das Stylesheet schaut folgendermaßen aus:
HTML:
body, html
{
height:100%;
margin:0;
padding:0;
}
div#page
{
height:auto;
min-height:100%;
width: 900px;
margin: 0 auto;
background: #000;
position: relative;
}
div#header
{
width: 900px;
height: 100px;
background: #500;
position: relative;
}
div#footer
{
position:absolute;
width: 900px;
clear: both;
bottom: 0px;
height: 15px;
background: #500;
margin 0 auto;
}
div#container
{
width: 900px;
min-height: 100%;
position:relative;
}
div#content
{
background: #550;
}
div#navi_left
{
float: left;
width: 120px;
min-height: 50px;
background: #AA0;
}
div#navi_right
{
float: right;
width: 120px;
min-height: 50px;
background: #AA0;
}Ich habe aus dem div#content das min-height: 100%; entfernt, da es sowieso nicht geht und damit die Navigation wenigstens sichtbar ist stehen dort 50px angegeben. Bestenfalls sollen die Navigationen ebenfalls 100% Höhe haben, so dass sich deren Hintergrund auf der Seite erstreckt.
Das ganze will jetzt einfach nicht und laut diversen Foren ist es auch nicht möglich. Stimmt das? Wenn ja was soll ich machen? Ich hab irgendwie aufgeschnappt, dass es mit Javascript möglich ist aber die Seite soll eigentlich ohne JS auskommen. Soll ich das in Tabellen machen? Hoffentlich nicht :l
Die eigentliche Seite ist schon recht komplex gecodet und eine Designänderung würde zuviel Zeit in Anspruch nehmen. Also bitte helft mir :l
g
PS: Hier ein Link auf das obige Beispiel http://www.oneted.de/sites/styletest.htm
