Make Div overlay ENTIRE page (not just viewport)??
Posted
by Polaris878
on Stack Overflow
See other posts from Stack Overflow
or by Polaris878
Published on 2010-05-17T19:55:44Z
Indexed on
2010/05/17
20:00 UTC
Read the original article
Hit count: 283
Hello, 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.
© Stack Overflow or respective owner
