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

Code:

#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%;
}

HTML Code:

<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

Originally Posted by ItsMeOnly

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

Code:

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

Code:

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 ***/

HTML Code:

<!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>

Thread: changing height for div to 100%

Thread Tools

Search Thread

changing height for div to 100%

Bookmarks

Bookmarks

Posting Permissions