Measure height of page in pixels..?

Aaron · 01-03-2008, 08:51 AM

I need to measure the height of a page in pixels, and then set the height of a div to that height minus X amount of pixels... How would I do that? O.o

(height:auto; doesn't work in IE or Opera...)

Seems like a javascript kinda' thing, but javascript can get browser iffy, and I don't know JS anyway O.o.

sjaq · 01-03-2008, 11:54 AM

Put this in your css::

Code:

#yourdiv {
	width: expression((document.body.clientHeight-20) + 'px');
}

Replace 20 with a number of choice and #yourdiv with your selector

edit: You should've posted this in the HTML and CSS section

ReSpawN · 01-03-2008, 05:43 PM

It isn't that advanced as well. There a LOT of resize and size measuring tools around. Most of them are Javascript based. So, simply search for "Resolution Detection Javascript" or what ever, and you should probably find what you're looking for.

Once again Aaron, I've told you before, don't bite off more than you can chew!

Friendly advice non the less.

Andrew · 01-03-2008, 06:42 PM

I've never had to use expression() in my CSS before, but will it automatically update upon resizing? I understand it might not work DURING the resize, but once you finish, will it update?

Aaron · 01-03-2008, 07:00 PM

The expression isn't working for me... T.T

Respawn, why do you think that this is more than I can chew?

TlcAndres · 01-03-2008, 07:51 PM

The O.o makes it seemed like your completely and utterly baffled which is somethin akin to "biting off more than you chew".

ReSpawN · 01-03-2008, 08:23 PM

Quote:

Originally Posted by TlcAndres

The O.o makes it seemed like your completely and utterly baffled which is somethin akin to "biting off more than you chew".

There's my backup on this one. It's not meant as offense, but if you had any clue what to look for, you could have found out yourself. That's the general way I learned Javascript & PHP combined.

Rendair · 01-04-2008, 01:09 PM

I made this code couple weeks ago its very simple one.

PHP Code:


			
<script type="text/javascript">
    
function overLay(){

    var height = document.body.clientHeight;
    var width = document.body.clientWidth;
    
    document.getElementById("overlay").style.width = width;
    document.getElementById("overlay").style.height = height;
    document.getElementById("overlay").style.opacity = 0.2;
}
    
</script>

It will leave a gap around the page, but you can also make it so it sets the body margin to 0 so it fits plush to the sides.

Here is an example i made: HERE

Wildhoney · 01-04-2008, 01:13 PM

I see one issue with that, Rendair, and that is the bottom of the scroll bar is missing on the window that pops-up after you click grow. In Firefox, anyhow.

Rendair · 01-04-2008, 01:24 PM

Quote:

Originally Posted by Wildhoney

I see one issue with that, Rendair, and that is the bottom of the scroll bar is missing on the window that pops-up after you click grow. In Firefox, anyhow.

Indeed it does need tweaking, but that pop up is just a feature you can add the code above does not give you that, but just lets you cover the page with a div

Wildhoney · 01-05-2008, 01:14 AM

Aye! In that case it is very nice

Excuse my finickiness!