Making a div fit the initial screen

Question

I want to make a div fit the initial height and width of a users screen.

I think the following crudely drawn diagram explain this better:

Answer 1

Setting your height to 100% in a div only means that your div will fill 100% of its container; not 100% of the page.

I would suggest that you would either want to use a min-height declaration on your div or its container or use JavaScript to find the initial height of the user's screen (because everybody will have something slightly different) and set that as an inline style on your div.

Code something along the lines of the following will return the screen dimensions:

var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}