ansaurus

Question

Make Div overlay ENTIRE page (not just viewport)??

Answer 1

+4 A:

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-color:#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>

Jonathan Sampson 2010-05-17 19:58:44

@Jonathan Sampson: I might be wrong, but will position fixed work in IE6?! I know probably nobody cares much about IE6 anymore.

Marco Demajo 2010-05-17 22:04:11

@Marco Not sure. To be honest, if support for a browser 10 years old isn't explicitly requested, I'm not going to bother anymore :)

Jonathan Sampson 2010-05-18 01:31:30

Answer 2

+1 A:

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.

Arve Systad 2010-05-17 20:00:05

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.

Jonathan Sampson 2010-05-17 20:02:09

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 2010-05-17 20:04:15

@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 :)

Jonathan Sampson 2010-05-17 20:06:20

I've seen it, and I simply think it's too big :)

Arve Systad 2010-05-17 20:24:09

@Jonathan Sampson: great link, +1, thanks!

Marco Demajo 2010-05-17 22:10:44

@Arve The resets aren't that big - try recovering completely from `*{}` and you'll see a lot more :)

Jonathan Sampson 2010-05-18 01:32:35

ansaurus

tags:

views:

answers:

Make Div overlay ENTIRE page (not just viewport)??

related questions