CODEWITHSUNDEEP
javascripthtmlcss
mseifert
mseifert

Reputation: 5670

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

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

Upvotes: 2

Views: 2492

Answers (3)

adeneo
adeneo

Reputation: 318192

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 5

sahbeewah
sahbeewah

Reputation: 2690

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

Upvotes: 3

Related Questions