Question: My post is in regards to <http://www.thepostboard.net>

I need to make the black box that is currently covering 100% of the viewport cover the entire page instead. You'll only be able to notice this if your screen needs a scrollbar to view the website--otherwise it looks fine.

I have the overlaying div set to:

```
position: absolute;
height: 100%;
width: 100%;

```

I also have body set to:

```
height: 100%;
margin: 0px 0px;
padding: 0px; 0px;

```

But for some reason on my laptop if I scroll down I see the edge of the DIV and nothing is blocked off underneath it.

The purpose of this is to create a custom lightbox for the website. I have disabled the Javascript that dims the box so you can see the effect.

How do I make it cover the entire page, not just the viewport?

(My laptop is a 1366x768, so presumably you'd see it on anything with a height resolution <= 760).

Answer: 
This solution has worked best for me:

```
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

```

No need to style any other elements except the tag.
try to add this css:

```
html {
height: 100%;
margin 0;
}

```