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

Solution 1:

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.

Solution 2:

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!

Solution 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.

Solution 4:

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.

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

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts