Difficulty when trying to size Div's in An XP environment. under IE8

Question

I am trying to understand a problem in my web development. I am developing in an XP environment with IE 8. To get to the route of the problem, I developed a very simple web page.
It basically consists of two elements. A body (with a red background) and a Div (with a green background). I set the height of the div to 100%. I would expect the div to fill the page since both height and width are 100%. But instead I get a thin div, maybe half a cm in height that stretches nearly to the left and right edges of the page. If I specify the height of the div as an absolute number of pixels (e.g. 512px) I can increase the height of the div. But this is not going to work for me since I need to accommodate users with different screen resolutions. There is something fundamental that I am not getting here. Can someone help me?

Here is the content of the page:

<!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="X-UA-Compatible" content="IE=EmulateIE7" />
 <title>TEST</title>
 <link href="css/stylesheet.css" type="text/css" rel="stylesheet" media="all"/>
</head>

 <body>
   <div id="container">
    </div>
</body>
 </html>

And here is the style sheet associated with the page.

     body
  {
text-align:center;
    background-color:red; 

  }
  #container
  {

width:100%;
height:100%;
  background-color:green; 
 }

This issue is not unique to XP and IE8. It applies pretty much everywhere if I'm not mistaken. — selbie, Jan 22 '12 at 07:40
possible dupe of: http://stackoverflow.com/questions/1366548/css-set-div-height-to-100-pixels — selbie, Jan 22 '12 at 07:41
another dupe: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — selbie, Jan 22 '12 at 07:42

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

The key is found on another stackoverflow post:

Make a div fill the height of the remaining screen space

What turned out to be essential was adding the following to my css file:

body
,html
{
 height: 100%;
 margin: 0;
 padding: 0;

}

I also note that nesting div's doesn't seem to work well and that unesting them gave me more control over how the formatting behaved.

edited May 23 '17 at 11:48

Community

1
1

answered Jan 22 '12 at 16:29

Elliott

5,523
10
48
87

Difficulty when trying to size Div's in An XP environment. under IE8

1 Answers1