Proper IE6 HTML element dimensions

Question

I'm trying to set the width and height of an element with javascript to cover the entire browser viewport, and I'm successful using

document.body.clientHeight

but in IE6 it seems that I always get horizontal and vertical scrollbars because the element must be slightly too big.

Now, I really don't want to use browser specific logic and substract a pixel or 2 from each dimension just for IE6. Also, I am not using CSS (width: 100% etc.) for this because I need the pixel amounts.

Does anyone know a better way to fill the viewport with an element in IE6+ (obviously all good browsers, too)?

Edit: Thanks Owen for the suggestion, I'm sure jQuery will work. I should have specified that I need a toolkit-agnostic solution.

Answer 1

This may help the cause ...

From http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ :

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }

 // older versions of IE

 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

Answer 2

have you considered using jQuery? it abstracts most of the browser specific functionality away into a common interface.

var width = $(document).width();
var height = $(document.height();

$('#mySpecialElement').width(width).height(height);

Answer 3

Ah ha! I forgot about

document.documentElement.clientLeft

and

document.documentElement.clientTop

.

They were 2 in IE and 0 in the good browsers. So using

var WIDTH = ((document.documentElement.clientWidth - document.documentElement.clientLeft) || document.body.clientWidth);

etc. did the trick, similar idea for HEIGHT!