Scrollbar detection

[MarioGamer99]

I need a script that will detect if there are scrollbars, and if there is, then insert <style type="text/css">body { height:auto; }</style> into the header.

[jscheuer1]

I need a script that will . . .

I really doubt that (there must be a better way of dealing with your design problem(s), and directly assigning the style to the body would probably do just as well, and cause less backward compatibility issues). However, this will come about as close as is possible to doing that in modern browsers (IE will not accept it, but will apply the style directly to the body element). A DOCTYPE that triggers standards compliance is required:

onload=function(){
var portH=window.innerHeight||document.documentElement.clientHeight;
if(document.documentElement.scrollHeight>portH){
try {
var s=document.createElement('style');
s.type="text/css";
s.appendChild(document.createTextNode('body {height:auto;}'))
document.getElementsByTagName('head')[0].appendChild(s);
}catch(e){
document.body.style.height='auto';
}
}
}

[MarioGamer99]

THANKS!
It seems to work fine in IE6 and 7. It's perfect. I've spent days trying to get my layout to work with pure CSS, and your script makes it work!

[jscheuer1]

In that case, you should probably just use:

onload=function(){
var portH=window.innerHeight||document.documentElement.clientHeight;
if(document.documentElement.scrollHeight>portH)
document.body.style.height='auto';
}

as that is all that it is doing in IE, and other browsers can do it that way as well.

I still think there must be a better way to get your design to work though.

[MarioGamer99]

I hope there is, but I've been trying a lot. Maybe weeks. I've only had a makeshift solution by manually making the page longer than the screen with line breaks.

[jscheuer1]

If body {height:auto;} is so nice when the page doesn't fit vertically (I am assuming that's the story), what are you using for the body height otherwise? Generally the body height should simply not be defined, then it will default to auto or something like that. That way, if your page fits the window, fine. Otherwise you will have a vertical scrollbar. It's that simple.