I'm trying to use CSS to create a 'greyed out' effect on my page while a loading box is displayed in the foreground while the application is working. I've done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div's height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page's content? I've tried using JQuery .css('height', '100%') before toggling it's visibility on but this doesn't change anything.
This is the CSS of the div in question:
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Thanks.
If you change position: absolute to position: fixed it will work in all browsers except IE6. This fixes the div to the viewport, so it doesn't move out of view when scrolling.
You can use $(document).height() in jQuery to make it work in IE6 too. E.g.
$('.screenMask').height($(document).height());
That would obviously fix it for all the other browsers too, but I prefer not using JavaScript if I can avoid it. You'd need to do the same thing for the width too, actually, in case there's any horizontal scrolling.
There are plenty of hacks around to make fixed positioning work in IE6 too, but they tend to either impose some other limitations on your CSS, or use JavaScript, so they're likely not worth the trouble.
Also, I presume you have only one of these masks, so I'd suggest using an ID for it instead of a class.
I realize I'm answering this long, long after it was asked, but I landed here after being briefly tripped up by this issue, and none of the current answers are correct.
Here's the right answer:
body {
position: relative;
}
That's it! Now your element will be positioned relative to <body> rather than the viewport.
I wouldn't bother with position: fixed, as its browser support remains spotty. Safari prior to iOS 5 didn't support it at all.
Note that your <div> element will cover <body>'s border-box (box + padding + border), but it won't cover its margin. Compensate by setting negative positions on your <div> (e.g. top: -20px), or by removing <body>'s margin.
I'd also recommend setting <body> to height: 100% to ensure you don't ever end up with a partially-masked viewport on a shorter page.
Two valid points taken from prior answers. As Ben Blank says, you can lose the width and height declarations, positioning all four corners instead. And mercator is right that you should use an ID instead of a class for such an important single element.
This leaves the following recommended complete CSS:
body {
position: relative;
margin: 0;
}
#screenMask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
And HTML:
<body>
<div id="screenMask"></div>
</body>
I hope this helps somebody else!
position: absolute combined with left, right, top, and bottom is a real life-saver sometimes, and always easy to forget about - Steven Lu 2013-10-23 18:27
body almost solves it, but setting body's height to 100% isn't a useful solution: While it fixes pages that don't fill the viewport, it breaks bigger ones, i.e. body will only have the viewport's height. Also, setting min-height: 100% to body seems to do nothing at all (Firefox) - Cedric Reichenbach 2013-12-27 14:18
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
By setting all of top, bottom, left, and right, the height and width are automatically calculated. If screenMask is a direct child of the <body> element and the standard box model is in effect (i.e. quirks mode has not been triggered), this will cover the entire page.
position:fixed to prevent the div.screenMask from scrolling, if the underlying page is taller than one viewport-height - David Thomas 2009-06-16 20:45
If you want popup with overlay effect then you can use these step..
<style>
.overlay{
background:#000;
opacity:0.5;
position:fixed;
z-index:1;
width:100%;
height:100%;
}
.popup{
width:500px;
margin:auto;
position:fixed;
z-index:2;
height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
Hello everyone
</div>
If you are using jQuery to set the height before the popup I'm guessing it is OK to add some more javascript :)
You can set the height of the div to the scrollHeight of document.body - this way it should cover the whole of the body. You do need to add some extra trickery to make sure it keeps covering the body in case something underneath decides to grow though.