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.
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.
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
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!
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}
Source: Stackoverflow.com