Best IT Recipes

Make the page div overlay ENTIRE (and not just in the viewport)?

So, I have a problem that I think is quite common, but I still have to find a good solution. I want the overlay div to close the ENTIRE page ... Not just the viewport. I do not understand why this is so difficult to do ... I tried setting the body, html heights up to 100%, etc., but that does not work. Here is what I still have:

<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 would also be ready for a solution in JavaScript, if it exists, but I would rather use simple CSS.

+75
html css
May 17 '10 at 19:55
source share
4 answers

Everything that matters in the viewport, but you probably want the whole website to stay dark even while scrolling. For this, you want to use position:fixed instead of position:absolute . A fixed item will keep the item on the screen while scrolling, giving the impression that the whole body has 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>
+178
May 17 '10 at 19:58
source share
 body:before { content: " "; width: 100%; height: 100%; position: fixed; z-index: -1; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
+10
Nov 14 '12 at 15:03
source share

First of all, I think you misunderstood what viewport is. The viewport is the area that the browser uses to render web pages, and you can in no way create your own websites to override this area in any way.

Secondly, it seems that the reason your overlay-div will not cover the entire viewport is because you need to remove all the fields in BODY and HTML.

Try adding this to the top of your stylesheet - it resets all fields and paddings for all elements. Makes further development easier:

 * { margin: 0; padding: 0; }

Edit: I only better understood your question. Position: fixed; will probably work for you, as Jonathan Sampson wrote.

+1
May 17 '10 at 20:00
source share

I looked at the Nate Barr answer above that you liked. This does not seem to be simpler

 html {background-color: grey}
-6
Jun 06 '15 at 3:36
source share


More articles:


All Articles