has anybody an idea, why the blue div isn’t set to 100% ?
I need the blue div at the top of he brown footer!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"></meta>
<title></title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
div#container {
height: 100%;
height: auto !important;
min-height: 100%;
margin-bottom: -50px;
}
div#header {
height: 50px;
background: #ba6f19;
}
div#body {
overflow: hidden;
height: 100%;
background-color: blue;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#content {
margin:0;
}
div#footer-push {
height: 50px;
}
div#footer {
height: 50px;
background: #ba6f19;
}
/* --- CUSTOM START */
.us{
float:left;
width: 100%;
min-height:50px;
min-width:50px;
height:auto;
cursor:pointer;
text-align:center;
}
div.cal
{
width:14.28%;
float:left;
color:#fff;
overflow:hidden;
height:100%;
min-height:100%;
background-color: black;
}
div.cal_headline
{
padding-left:3px;
position:relative;
background-color:#000000;
color:white;
min-width:100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="body">
<div id="content">
d
</div>
</div>
<div id="footer-push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
thank you very much
For height percentages to work, the parent container needs a height. So in your case, simply remove
height: auto !important;from your div#container so that it’s height is simply 100%.