body element doesn't have 100% height
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;
开发者_C百科 }
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%.
div#container {
height: 100%;
min-height: 100%;
margin-bottom: -50px;
}
change your CSS like this
Add this style
body{
background-color: blue;
}
Modify this style
div#body {
overflow: hidden;
height: 100%;
}
This is my solution:
html, body {width:100%;height: 100%; padding: 0; margin: 0;} #container {position: relative; height: 100%; width: 100%; margin: 0 auto;}
#header, #footer {height: 20px; background: #dad; position: absolute; left: 0; right: 0;}
#header {top: 0;}
#footer {bottom: 0;}
#content {position: absolute; top: 20px; bottom: 20px; left: 0; right: 0; background: #ffc; overflow: auto;}
.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>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {text-align: center;}
#header, #footer, #content {width: 100%;}
#content {
text-align: left;
height: expression(document.body.offsetHeight - 40 + "px");
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="content">
</div>
<div id="footer">footer</div>
</div>
</body>
加载中,请稍侯......
精彩评论