Question

I have

<div id=overlay>
    <div></div>
</div>

the height and width of the outer div is set to 100%.

What happens here is, the 100% refers to the size of the element inside (inside div).

I have a dynamically changing element on inside div, and I wanted to be my outer div got the size of the page screen.

NOTE that these div (outer and inside) are a popup element. So I wanted to cover all other elements behind the popup that’s why I need the 100% of the page behind.

this is my css for the outer div

#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 min-height: 100%;
 min-width: 100%;      
 height: auto !important;
 width: auto !important;       
 text-align:center;
 z-index: 1000; 
 background-image:url(template/popup-bg.png); 
} 

my js

function overlay(e) 
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Answer 1

Simply change the HTML to this

<div id='overlay' class='hideOverlay'>
    <div></div>
</div>

Now on clicking simply change the class.
Change your js to this

function overlay(e) 
{
    $('#overlay').attr('class', 'showOverlay');
}

Check the following style

.showOverlay
{
    background-color: red;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2;
    position: fixed;        
    width: 100%;
    z-index: 1001;
}

.hideOverlay
{
    display:none;
}

Background-color is given just to check the div’s visibility. Change it as per your choice.
It is nice to have some opacity for overlays to have a better look and feel effect.