Menu
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.
530
For a responsive full page height, set the body element min-height to 100vh.
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.
174
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!
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
