How to make a div 100% of page (not screen) height?

Go To StackoverFlow.com

51

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.

2009-06-16 19:56
by Lee D
Would it work to disable to scroll bar while you translucent gray div is displayed? Do you really want users to be able to scroll down to see something they cant do anything with anyway - Adam 2009-06-16 20:00


53

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.

2009-06-16 20:02
by mercator
If the mask is being shown with Javascript, what is more Javascript to fix the height problem - Paolo Bergantino 2009-06-16 21:08
Thanks, changing absolute to fixed was all that was needed! Fair point about the ID too - Lee D 2009-06-16 21:21
@Lee: Excellent... @Paolo: It's hardly an issue here, I have to agree. But while JS support isn't the problem here, you do end up mixing style with behavior, and you might (slightly) affect performance too. And Lee kind of answered your question too. The JavaScript solution wasn't actually necessary in this case - mercator 2009-06-16 21:34
ahhh, remember the good ol' days when 100% actually meant 100% - Scott Greenfield 2011-11-08 02:39


17

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!

2012-08-16 03:32
by Aaron Adams
+1, however I'll point out that even this is a questionable approach when changing the scrolling container's position to relative may have unforeseen consequences. Luckily for me, today, my scrolling container is already relative positioned! The trick of using 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
Positioning relative to 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


3

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.

2009-06-16 20:26
by Ben Blank
Don't you need to use 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
This doesn't work in IE6 at all. In other browsers it needs position: relative on the body to work, and even then it only works on vertical scrolling, not horizontal scrolling - mercator 2009-06-16 21:23


2

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>
2014-09-18 12:43
by Servesh Mishra


1

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.

2009-06-16 20:05
by ylebre
Ads