How to make a div container to occupy full browser area

[Albert Pinto]

Hi People.
Want some help regarding overlay div.

I'm trying to develop a overly form. Just wanna know how to make div container(the overlay form) occupy or wrap entire browser area....

What I'm trying to do is......

I have a parent container, where all other containers and images reside. In this container there is a button, "GET REGISTRATION FORM".

On click of this button, I want the background to go dull....and the registration form to fade in front... User should not have any access to the page content beneath when this form is on top. There is close button in the form. Once its clicked the form will fade out... and my home page below will be active again.

What I've done so far is....

Just above my parent container, I've created another div with id "overlay".
I've put form inside this.... and then in CSS, I've made like this.

#overlay
{
position: absolute;
z-index : 10; 
top: 0;
left:0;
width: 100%;
height: 100%;
background: url('transparent_image.png');
display: none
}

Initialy I've got to hide the div, and make it appear only on click event of the "GET REGISTRATION FORM" button.
So, in jquery I've passed id of the "GET REGISTRATION FORM" button... on click... #overlay will fadeToggle();

Now the problem is... my home page content is dynamic. I mean there are some tables which display lot of data. And these records are fetched from database and displayed in the table. So the number of records displayed in the table vary.... and hence the height of my home page will vary.... I'm not able to get the #overlay container to occupy entire browser area.... I mean it goes to certain height... and then when I scroll... the home page contents (which are beneath the overlay form) are visible .... I mean the overlay container won't completely wrap the browser area. Is there any way to make it occupy entire home page..?

Sorry for the lengthy post, just wanted to clarify my issue as much as possible.

Thanks

[Octet]

This is a common mistake that people make, you need to define a 100% area in both your Body and Overall in your CSS like this:

*{
    height: 100%;
}

body{
    height: 100%;
}

#DIV{
    height: 100%;
}

Give that a try and let us know how it goes! That should tell the Div to occupy the entire area of the browsers viewport (however it does cause other values to do some funky things.... so be careful).

[Albert Pinto]

Thanx for the quick reply sir...

Yeah I tried that solution, didn't worked.

I tried this too....

*{
height: 100%;
}

But it caused lot of alignment issues.... so I reverted it back....

I don't know whether there is a pure CSS way to fix this...I'm still trying to find some solution to this...... will post it here if I found one.

Thanx for your time and consideration.

Regards.

[iamthwee]

Um fancybox anyone?

[crescendo]

height and width set to 100% should have worked. It works for me everytime I use it

[TonyG_cyprus]

Check the size of your transparent_image.png (I would make it 1px x 1px)
and use background-repeat: repeat; because although your div is 100% x 100% your image may not be big enough.

[Albert Pinto]

Yes of course sir.. my image is 1px X 1px and in png format.....