CSS Full Screen DIV
   
Creating a full-screen div is easy with CSS. You may also want to check out my
other articles on div positioning: center screen (URL:
css-center-screen-div.html), top right corner (URL:
css-top-right-corner-div.html), bottom left corner (URL:
css-bottom-left-corner-div.html), and bottom right corner (URL:
css-bottom-right-corner-div.html). You can click the following link to preview
this CSS in action:
   
Click here to preview full-screen div (URL: position-div-full-screen.html)
   
The CSS
   
Put this code inside the head tag:

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }

  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
  }

</style>

   
This CSS sets the div at the top-left corner, and makes it fill the screen.
   
Now, just grab the XHTML (URL: #html) for the actual div.
   
The HTML
   
Place this code inside the body tag:

<div class="fullscreen">
  <p>Here is my div content!!</p>

</div>

   
CSS Walkthrough
     
This CSS is not too hard, but let's do a walk-through.

body{ height:100% }
 

   
This line doesn't change the look of the page in any way. What it does do is
give the body a definitive height. Now, we can give our div a height and it will
know what to base it off of.

display:block;

position:absolute;
top:0;
left:0;

   
This section just puts the div in the very top-left corner of the page.

width:100%;
height:100%;

   
This section finishes it off by making the div as wide as the whole page and as
tall as the whole page. Therefore, it fills the whole page!
   
More Questions?
   
As always, if you have any more questions, please email me (URL: contact.html).
I am always glad to answer questions and work on custom scripts.