Log in

View Full Version : changing height for div to 100%


jigarshah
11-20-2006, 04:00 PM
Hi,
I want to have <div> element in such a way tht its always 100% of browser height.
So tht my footer always stick to bottom and does not resize.
here is actual test page
http://www.yourfreespace.net/users/jigarshah/trial.html

Thanks in advance

i also tried with
height:100%; instead of min-height:100%;(Not supported in IE)
still does not work


#container {
background:#f0f0f0 url(../images/images_blue/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
padding:0;
text-align:left;
min-height:100%;
}
#footer {
background:#8b8b8b url(../images/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:10px 0 10px;
text-align:center;
width:100%;
}





<body>
<div id="container">
Hi this is test
<div id="footer">
Hi this is footer
</div>
</div>

</body>
ItsMeOnly
11-20-2006, 07:50 PM
the problem is trivial: the div is 100% of parent- that is document body, which of height is undefined...
jigarshah
11-21-2006, 05:24 AM
the problem is trivial: the div is 100% of parent- that is document body, which of height is undefined...

Thanks for your reply.
I tried by adding this as well. Still doesn't work. Please Help me.

same testing page
http://www.yourfreespace.net/users/jigarshah/trial.html



body {
background:#8b8b8b;
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
height:100%;
}



Complete code is something like this

CSS


body {
background:#8b8b8b;
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
height:100%;
}

/*** Main container ***/

#container {
background:#f0f0f0 url(../images/images_blue/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
padding:0;
text-align:left;
height:100%;
}

/*** Footer ***/

#footer {
background:#8b8b8b url(../images/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:10px 0 10px;
text-align:center;
width:100%;
}

/*** End of file ***/




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Jigar's Homepage</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/test.css" />
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
</head>
<body>
<div id="container">
Hi this is test
<div id="footer">
This is footer
</div>
</div>
</body>
</html>