Skip to navigation

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, top right corner, bottom left corner, and bottom right corner. You can click the following link to preview this CSS in action:

Click here to preview full-screen div

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 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. I am always glad to answer questions and work on custom scripts.