Proper IE6 HTML element dimensions

问题:

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.

回答1:

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);

回答2:

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>

回答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!