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

Question

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 c

Answer 1

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

element will cover 's border-box (box + padding + border), but it won't cover its margin. Compensate by setting negative positions on your

(e.g. top: -20px), or by removing 's margin.

I'd also recommend setting 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:

I hope this helps somebody else!

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...