PDA

Click to See Complete Forum and Search --> : Adjust div height from Browser Height...

bubbisthedog
10-17-2005, 10:36 AM
Hello,

I've been searching around for a while, and can not figure out how to adjust a relatively-positioned div height based on the browser height. I can get the screen height easily with JavaScript, but can't figure out how to apply it to the div height. Below is what I've been trying, but nothing happens. My setup is dead-simple: top div-750px width, 100px height; middle div (the one in question)-750px width, height dynamic; bottom div-750px width, 100px height.

<script>

<head>

window.onresize = divheight;

function divheight()
{
var hght = document.getElementById('results');
var adjwidth = 0, adjheight = 0;

if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
myHeight = window.innerHeight;
}

else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}

else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

set hght.height = myHeight - 200;
}
}

</script>

</head>

Could someone please tell me where I'm going wrong here? As you can probably tell, I'm still learning how to apply JavaScript. I'd really appreciate any assistance with this issue.

Regards,

bubbis
s4sh
10-17-2005, 11:06 AM
try changing the style height instead, eg

hght.style.height = myHeight - 200;
bubbisthedog
10-17-2005, 11:51 AM
Thank you, s4sh, but the div tag is still not resizing. I'm not getting any JavaScript error; it's just not doing anything. Any other suggestions?

Thank you,

bubbis

P.S. My script tag is after the head tag, unlike the code that I posted.
s4sh
10-17-2005, 12:15 PM
bubbisthedog,
the following works for me:


<html>
<head></head>
<body>
<script>
window.onresize = divheight;

function divheight()
{
var hght = document.getElementById('results');
var adjwidth = 0, adjheight = 0;

if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
myHeight = window.innerHeight;
}

else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}

else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

hght.style.height = myHeight - 200;

}

</script>

<div style="width:750px; height:100px; border:1px solid black">
top
</div>
<div style="width:750px; height:100px; border:1px solid black" id="results">
middle
</div>
<div style="width:750px; height:100px; border:1px solid black">
bottom
</div>
</body>
</html>


let me know if it works for you

(you may have had one "{" too many in your script)
bubbisthedog
10-17-2005, 12:31 PM
Yep, it was 1) the unnecessary "set" and 2) the extra curly brace. Thanks so much for your assistance, s4sh! Works perfectly. ;)

Have a great day, s4sh.

Regards,

bubbis