ansaurus

Question

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

Answer 1

+1 A:

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.

mercator 2009-06-16 20:02:59

If the mask is being shown with Javascript, what is more Javascript to fix the height problem?

Paolo Bergantino 2009-06-16 21:08:09

Thanks, changing absolute to fixed was all that was needed! Fair point about the ID too.

Lee D 2009-06-16 21:21:15

@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:30

Answer 2

+1 A:

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.

ylebre 2009-06-16 20:05:47

Answer 3

+2 A:

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.

Ben Blank 2009-06-16 20:26:26

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

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

ansaurus

tags:

views:

answers:

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

related questions