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

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

• javascript
• html
• css

3 Answers 3

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 mon to add class to body when using such an overlay that sets body overflow to hidden

DEMO

You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).

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