Make absolute div height 100% even when scrollbar is visible

Question

HTML

<div class="modalPage"style="display:none;"></div>

CSS:

.modalPage{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;
    top:0px;
}

JS:

$(".modalPage").toggle();

Effect:

Now there is a layer above everything. So the user cannot interact with the website anymore.

Problem:

When scrollbar appears because of much content, the layer actually does not stretch in height like you see in the image.

How can I make the absolute div stretch automatically?

Answer 1

.................................

hi now don't used width or height and now used to position fixed

as like this

.modalPage{
    position:fixed;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;
    top: 0;
    left:0;
right:0;
bottom:0;
}

Answer 2

.modalPage{
    position:fixed;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;
    top: 0;
    left:0;
}