Make Div overlay ENTIRE page (not just viewport)?

Question

So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.

Can read also more here: http://stackoverflow.com/questions/1938536/how-to-make-the-height-really-100/1938592#1938592 — Marco Demaio, May 17 '10 at 22:13

Sampson · Accepted Answer · 2012-05-30T13:30:14.110

264

The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.

Example: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

edited May 30 '12 at 13:30

answered May 17 '10 at 19:58

Sampson

265,109
74
539
565

3

I might be wrong, but will position fixed work in IE6?! I know probably nobody cares much about IE6 anymore. – Marco Demaio May 17 '10 at 22:04
31

@Marco Not sure. To be honest, if support for a browser 10 year old isn't explicitly requested, I'm not going to bother anymore :) – Sampson May 18 '10 at 01:31
5

So how do you guys do it on mobile devices? http://bradfrostweb.com/blog/mobile/fixed-position/ – BorisOkunskiy May 30 '12 at 10:36
3

+1 Thanks! I extended your example by adding a popup window above the overlay: http://jsbin.com/okabo3/740/ – kol Sep 10 '13 at 07:48
the issue i'm having with this (which is used by many a plug in) is when you click a ` – But those new buttons though.. May 27 '16 at 22:00
2

If you use `position: fixed` make sure to test on small screens because you get problems if the overlay content is larger than the screen/window. – wortwart Oct 17 '18 at 14:30

score 18 · Answer 2 · answered Nov 14 '12 at 15:03

18

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

answered Nov 14 '12 at 15:03

Nate Barr

4,640
2
25
21

2

The best possible solution out there. You just toggle "overlayed" class for body and apply the styling above to the body with that className. – Sviatoslav Zalishchuk Aug 04 '13 at 01:38
4

Please explain this answer more. I don't understand Sviatoslav's comment. – Lonnie Best Jun 01 '16 at 19:07

Arve Systad · Answer 3 · 2010-05-17T20:05:41.150

1

First of all, I think you've misunderstood what the viewport is. The viewport is the area a browser uses to render web pages, and you cannot in any way build your web sites to override this area in any way.

Secondly, it seems that the reason that your overlay-div won't cover the entire viewport is because you have to remove all margins on BODY and HTML.

Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements. Makes further development easier:

* { margin: 0; padding: 0; }

Edit: I just understood your question better. Position: fixed; will probably work out for you, as Jonathan Sampson have written.

edited May 17 '10 at 20:05

answered May 17 '10 at 20:00

Arve Systad

5,471
1
32
58

1

You shouldn't removing padding and margins from *everything*. It could be really laborious to get those back for many elements like buttons and form inputs. – Sampson May 17 '10 at 20:02
1

In my opinion, its just a really easy way to treat everything more as the same across browsers. Might not apply as much today as it did back before when adapting to IE5, but I still do it as one of the first things i write in a stylesheet. – Arve Systad May 17 '10 at 20:04
3

@Arve It gets you close, but it's better to use a time-tested reset sheet instead. Check out http://meyerweb.com/eric/tools/css/reset/ for more information - you'll love it, I assure you :) – Sampson May 17 '10 at 20:06
I've seen it, and I simply think it's too big :) – Arve Systad May 17 '10 at 20:24
1

@Arve The resets aren't that big - try recovering completely from `*{}` and you'll see a lot more :) – Sampson May 18 '10 at 01:32

score 0 · Answer 4 · edited Jul 13 '20 at 15:02

I had quite a bit of trouble as I didn't want to FIX the overlay in place as I wanted the info inside the overlay to be scrollable over the text. I used:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Of course the div in the middle needs some content and probably a transparent grey background but I'm sure you get the gist!

score -7 · Answer 5 · answered Jun 06 '15 at 03:36

-7

I looked at Nate Barr's answer above, which you seemed to like. It doesn't seem very different from the simpler

html {background-color: grey}

answered Jun 06 '15 at 03:36

Justin Munce

187
1
9

Make Div overlay ENTIRE page (not just viewport)?

5 Answers5

Linked