0

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 triggers. The problem is that this div only takes up the visible screen and if a user decides to scroll they can see the rest of the "non-greyed out" site.

My question: How can you force a div to take up the entire width and height of the browser window?

I made a fiddle to simplify and reproduce the problem ( please see above ), and I have also included its code below. I'm trying to make the div take the entire screen through absolute positioning (as many other SO answers have suggested), but this tactic fails when there are other divs present. Any idea how to get around it?

html:

    <body>
        <div class="other_things"></div>
        <div id="full"></div>
        <div class="other_things"></div>
        <div class="other_things"></div>
        <div class="other_things"></div>
    </body>

CSS:

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

Similar Questions and their answers:

How to set div height to 100% of user's monitor resolution?

Make a div fill the height of the remaining screen space

Community
  • 1
  • 1
agconti
  • 17,780
  • 15
  • 80
  • 114

3 Answers3

6

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/

JKasper11
  • 772
  • 1
  • 7
  • 21
0

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/

Mike Vranckx
  • 5,557
  • 3
  • 25
  • 28
0
#full {
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.other_things {width:40em; height: 50em;}
Qwerky
  • 18,217
  • 6
  • 44
  • 80