PDA

View Full Version : CSS DIV height 100% of viewport


danulf
November 22nd, 2008, 06:35 AM
Long time no see!

I got this problem at work and I really can't find a solution for it.
They wanted to have a pop-up (sort of) that shows an ad for a new book release when a person enters their page. So there's a javascript that makes a div visible and placed on top of all other content when the page loads.

Then someone made a suggestion to fade the rest of the site towards black when the window pops up. I managed to do that after a little while (been a while since I did any css and html), but it works. Almost!

The thing is I want the div that works as a fader to expand so it covers the entire viewport. But the problem is that 100% height in a div means 100% of the browser window. When I scroll down you see this (look at the image).

Now I don't have the files here, but I googled it for some time yesterday and a lot of people have asked this but nothing seems to work. I managed to make it work in IE, but it still doesn't work in FF, Opera or Safari.


EDIT: I just realized there is an onScroll function in javascript. I could use that so it closes, I noticed that's what happens here on kirupa then you show an attached image. But it would still be nice if there's another solution, since there's no way to show the pop-up again after you close it.
Sage_of_Fire
November 22nd, 2008, 08:47 AM
Well, if you use absolute positioning on your semi-transparent box, you can scroll it with the browser window, so it always stays on top of the content. You should also calculate the height of your box with window.innerHeight (I think) so that it won't put a scrollbar on your page if your content is less than the width of the browser. Good luck!
danulf
November 22nd, 2008, 10:15 AM
now you're talking javascript right?
The positioning is absolute, but I can't remember how to do like you said, it's been too long since I did anything like this.

Right now I'm thinking of just writing

<body onScroll="javascript:closeComercial()">

That would probably suffice since it's only gonna be up for 2 days...
Icy Penguin
November 22nd, 2008, 03:06 PM
Here's a quick little Lightbox-type effect I whipped up with jQuery and the jQuery create plugin:



var overlay;
var box;

function Overbox(content) {

overlay = $.create("div", {"id": "overbox-lay"});

box = $.create("div", {"id": "overbox-box"});

$("body").append(overlay).append(box);

close_link = $.create("a", {"href": "javascript:;", "id": "close"}, ["X"]);

$(box).append(content).prepend(close_link);

top = 100 * ((document.body.clientHeight - $(box).css("height").replace("px", "")) / 2) / document.body.clientHeight + "%";

left = 100 * ((document.body.clientWidth - $(box).css("width").replace("px", "")) / 2) / document.body.clientWidth + "%";

$(box).css("display", "none").css("top", top).css("left", left);

$(overlay).fadeIn(200, function() { $(box).fadeIn(); });

$(overlay).click(function() { Close(); });
$("a#close").click(function() { Close(); });

}

function Close() {

$(overlay).fadeOut("10", function() { $(this).remove(); } )
$(box).fadeOut("10", function() { $(this).remove(); } )

}


#overbox-lay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
background: black;
opacity: 0.75;
}

#overbox-box {
position: fixed;
top: -1000%;
z-index: 1002;
}
But my <body> height is greater than the height of the viewport, so the height: 100% on #overbox-lay works fine. You might need to change the height of #overbox-lay with javascript and use the document.body.clientHeight attribute or something like that.
Templarian
November 22nd, 2008, 11:36 PM
This should do the trick with just CSS I presume you have a back and a box like Icy Penguins.

@media screen{
body>div#overbox-lay{
position:fixed;
}
}
@media screen{
body>div#overbox-box{
position:fixed;
}
}
danulf
November 23rd, 2008, 03:03 PM
yeah well I have one of those to make it work on everything but IE, and in IE the position is absolute. IE really sucks. I just hope they'll start following the standards.

Or am I missing something?

I have moved away from the subject. Now the question is how to make IE understand what "position:fixed" means... Sorry :D


EDIT: Woho! Got it to work!
I added this to the main div's css:

_position:absolute;
_top:expression(eval(document.body.scrollTop));

It's jaggy, but I think it works just fine!

Thanks for the tips!