How to make an absolute positioned div fill the entire document area

Question

I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area) -- width: 100% only fills the viewable screen

I prefer a CSS only solution but pure javascript is ok. I tried without success setting:

opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);

I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.

In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.

Thanks for any help.

<div class="page-container"></div>    
<div id="opaque"></div>

body {
    width:100%;
}
.page-container {
    position: relative;
    max-width:978px; 
    width: 100%;
    min-height:2500px; 
    margin:0 auto -50px auto; 
    border:solid #999;
    border-width:2px;
    background: lightblue;
}

#opaque {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: grey;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

Answer 1

Can use

#opaque {
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
}

remove width:100% from body due to creates horizontal scrollbar

Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden

DEMO

Answer 2

您可以在身体上放置一个position: relative document对象，子元素在高度上将其用作参考点。

Answer 3

Using javascript to set one elements height equal to anothers

var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');

o.style.height = window.getComputedStyle(p).getPropertyValue("height");

FIDDLE