javascript html高度vs窗口高度

时间:2014-02-11 17:24:22

标签: javascript jquery html css internet-explorer

我正在创建一些需要确定输入框上方和下方可用空间量的javascript,并使用该值进行一些计算/操作。基本上我得到$ input.offset()。height来获取上面的数量,然后从窗口的高度和输入框的高度中减去它以获得下面的可用数量。

问题是我需要支持IE Quirks模式,原因有多种是无法避免的。窗口高度始终为null或0,但如果我查询html高度,它似乎给了我正确的窗口/视口高度。

代码示例

$(window).height(); // This is 0
$("html").height(); // This is fairly accurate for the viewport height


var bottom_distance = $(window).height() - ($input.offset().top + $input.height);
var quirks_distance = $("html").height() - ($input.offset().top + $input.height); // Is this reliable?

我的问题是,我可以可靠地使用此值$("html").height()吗?

2 个答案:

答案 0 :(得分:1)

试试这个:     (文档)$ .height();

答案 1 :(得分:1)

给这个伴侣:

修改

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

从这个网站获得代码: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

我试用了4个版本的IE(6,8,10,11),3个不同的屏幕似乎可靠

我希望它有所帮助。

但是在IE 6及以下版本中执行此操作似乎是后方的痛苦,希望您正在使用IE 6以上的任何内容