Popup Div To Fill Entire Browser Width And Height

The Problem: My popup div dosent take up the entire screen. Fiddle replicating the problem. I have an email pop up that has a background div to 'grey out' the website when it trigg

Solution 1:

Instead of using position: absolute, use position: fixed which will attach to the window instead of the nearest div with a non-static position.

#full {
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.other_things {width:40em; height: 50em;}

You can see this working at http://jsfiddle.net/gUmPR/

Solution 2:

By adding a relative positioning on the body element, you are forcing the top / bottom / left / right definition to be relative of this element. Because your body element will have the total height / width (containing all blocks), your overlay will be correct (and taking full available space)

Here is the example on Jsfiddle: http://jsfiddle.net/5MUTy/1/

Solution 3:

#full {
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.other_things {width:40em; height: 50em;}