JavaScript Div Resize - Not Working in IE

[alexjewell]

For some reason, the following script is not working in IE8. You can view the context at http://www.alexjewell.com/clients/num12/index.php. Click on the Blog page and you'll notice how, since there's not enough content, everything ends before reaching the end of the viewport. The script does what it's supposed to in other browsers (Firefox and Chrome, specifically), and the content is stretched to at least the bottom of the viewport if the content doesn't already flow that far.

What isn't working in IE?



function rockBody(){
var buddyH = document.getElementById('content');
var buddy = buddyH.offsetHeight+200;
var torso = window.innerHeight;
if(buddy <= torso){
buddyH.style.height = torso-325+"px";}
}

window.onload=rockBody;


Thanks for any help.

[mburt]

The innerHeight property doesn't work in Internet Explorer at all.

http://code.google.com/p/doctype/wiki/WindowInnerHeightProperty

Getting the height of a window has always been a problem, but a simple way around it might be to use percentages? For example, if you set:

buddyH.style.height = "80%";
Wouldn't hurt to give it a shot.

[alexjewell]

I ended up using some simple browser detection. I found out that IE supports offsetHeight, so here is what I came up with:



function rockBody(){
var buddyH = document.getElementById('content');
var buddy = buddyH.offsetHeight+200;
if (navigator.userAgent.indexOf('MSIE') !=-1){
document.getElementsByTagName('html')[0].style.height="100%";
document.getElementsByTagName('body')[0].style.height="100%";
var torso = document.getElementsByTagName('body')[0].offsetHeight;
var buddy = buddy+50;
}
else{
var torso = window.innerHeight;
}
if(buddy <= torso){
buddyH.style.height = torso-325+"px";}
}

window.onload=rockBody;


Seems to work. Thanks!