Daniel Wolfensberger: Container 100%, Inhalt 100%?

Beitrag lesen

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