scm0sml
asked on
creating a full height div with opacity
Hi,
I want to create a div that has full height, not 100% so that it only fits my srceen size but go as long as the page is.
The reason im doing this is that on a button click i want this div to appear with some opacity set so the user can still see thru the div to the main content just for affect but this wuill then have another div inside with some information.
Basically i noticed that ee use this effect also, if you click on delete question you get exactly the same affect.
So basically i want to create a div with full height and width that stretches the full height of however long the page is.
Seems pretty simple but i could find much on the net to do this.
Can any1 help? I just need the css side of things.
I want to create a div that has full height, not 100% so that it only fits my srceen size but go as long as the page is.
The reason im doing this is that on a button click i want this div to appear with some opacity set so the user can still see thru the div to the main content just for affect but this wuill then have another div inside with some information.
Basically i noticed that ee use this effect also, if you click on delete question you get exactly the same affect.
So basically i want to create a div with full height and width that stretches the full height of however long the page is.
Seems pretty simple but i could find much on the net to do this.
Can any1 help? I just need the css side of things.
silemone
Did you read this one?
ASKER
yeah i need to create it on the fly really so i was hoping i could say right create a div with full height and width and slap it on the page as to get in the full lheight of my site i would have to have the div around my main content, which then means when i make it invisible will hide the rest of the site :(
i was hoping but doubting there was going to be a quick simple answer.
i was hoping but doubting there was going to be a quick simple answer.
Hello.
There are 2 solutions to this problem.
One uses min-height and the other using absolute positioning.
I created 2 example of each for you to see. Simply take the idea you want to use and move it to your other page.
http://www.web-starters.ne
http://www.web-starters.ne
The first link wont auto-stretch, the second one will.
You should use the z-index property in css to ensure it appears on top of your other content if that becomes a problem.
Regards, Jonathan.
There are 2 solutions to this problem.
One uses min-height and the other using absolute positioning.
I created 2 example of each for you to see. Simply take the idea you want to use and move it to your other page.
http://www.web-starters.ne
http://www.web-starters.ne
The first link wont auto-stretch, the second one will.
You should use the z-index property in css to ensure it appears on top of your other content if that becomes a problem.
Regards, Jonathan.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ah yes that is a much better solution, exactly what i was after!!!!!