nicht angemeldet
Container 100%, Inhalt 100%?
Hallo Zusammen
Ich habe einen Container der die Höhe 100% hat. Innerhalb des Containers soll ein Head-Bereich, ein Content-Bereich und ein Footer-Bereich sein. Footer und Head sollen eine fixe höhe haben und die Content-höhe sollte sich dem Inhalt anpassen (bzw. immer 100% höhe haben). Ist das überhaupt möglich?
Hier mal mein HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TestSeite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id='container'>
<div id='head'></div>
<div id='content'></div>
<div id='footer'></div>
</div>
</body>
</html>
Und mein CSS:
body,html{
padding:0px;
margin:0px;
height:100%;
text-align:center;
}
#container{
margin:auto;
width:800px;
min-height:100%;
height:auto !important;
height:100%;
background-color:#ff0000;
}
#head{
float:left;
height:200px;
width:800px;
background-color:#00ff00;
}
#content{
float:left;
width:800px;
height100%;
background-color:#000000;
}
#footer{
float:left;
height:100px;
width:800px;
background-color:#0000ff;
}
MfG Dani
-
Hallo Daniel,
Ich habe einen Container der die Höhe 100% hat. Innerhalb des Containers soll ein Head-Bereich, ein Content-Bereich und ein Footer-Bereich sein. Footer und Head sollen eine fixe höhe haben und die Content-höhe sollte sich dem Inhalt anpassen (bzw. immer 100% höhe haben). Ist das überhaupt möglich?
klar:
body,html{
padding:0px;
margin:0px;
height:100%;
text-align:center;
}#container{
margin:auto;
width:800px;
min-height:100%;/* height:auto !important;*/
height:100%;
background-color:#ff0000;
}#head{
float:left;
height:200px;
width:800px;
background-color:#00ff00;
}#content{
float:left;
width:800px;/* height100%;*/
height:100%;background-color:#000000;
}#footer{
float:left;
height:100px;
width:800px;
background-color:#0000ff;
}Vermutlich ist das aber nicht das, was Du willst. Die Angaben der Dimension (`height:*; width:*`{:.language-css}) eines Elements, das nicht in einer Tabelle (sei es `<table/>`{:.language-html} oder `display:table`{:.language-css}) definiert ist, bezieht sich immer auf den [umschließenden Block](http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.1%A0). Gruß aus Berlin! eddi -- Der Verweis auf die Grundlagen Deines Handelns, ist das Joch zur Freiheit. Aber so gilt: Allen Leuten Recht getan, ist keine Kunst, weil's jeder kann.-
Hallo Eddi
Das heisst also ich kann das was mir vorschwebt gar nicht mit div's bewerkstelligen?
Ich habe jetzt ein bisschen mit einer table rumexperimentiert. Im FF kriege ich das so hin wie ich mir das vorgestellt habe. Hier am besten mal ein Link dazu:
http://www.paranoidandroid.ch/index2.htmlUnd hier der Link mit Inhalt:
http://www.paranoidandroid.ch/index.htmlDas würde ich halt gerne mit Divs bewerkstelligen und das es in IE7, IE6, FF, Safari funktioniert.
Gruss aus Zürich
Dani-
Vielleicht findest Du hier was
http://www.dreamworker.de/foren/showthread.php?t=21916&highlight=nehme+an+Ausf%FChrliche+Beispiele+CSS-Basis
Gruß,
Alex.
-
-