这是我目前使用的,但它不考虑URL栏.
$(function(){
$(document).ready(function(){ // On load
alert($.browser);
$('#right-sidebar').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('#right-sidebar').css({'height':(($(window).height()))+'px'});
});
});
解决方法
如果您只想查询窗口高度,跨浏览器并完成它,请使用jQuery.documentSize并调用$.windowHeight().要实现您自己的解决方案,请继续阅读.
何时使用jQuery或clientHeight文件
jQuery的$(window).height()是document.documentElement.clientHeight的包装器.它为您提供视口的高度,不包括浏览器滚动条覆盖的空间.一般来说,它工作正常,并享有近乎通用的浏览器支持.但是有quirks on mobile,and in iOS in particular.
>在iOS中,返回值假装URL和标签栏可见,即使它们不可见.一旦用户滚动并且浏览器切换到最小UI,它们就会被隐藏.窗口高度在此过程中增加了大约60px,并且没有反映在clientHeight(或jQuery)中.
> clientHeight返回layout viewport,not the visual viewport的大小,因此不反映缩放状态.
所以…在移动设备上不是那么好.
何时使用window.innerHeight
您可以查询另一个属性：window.innerHeight.它
>返回窗口高度,
>基于视觉视口,即反映缩放状态,
>当浏览器进入最小UI(移动Safari)时更新,
>但它包括滚动条覆盖的区域.
最后一点意味着您不能将其作为替代品放入.此外,它在IE8中不受支持,并在Firefox prior to FF25(2013年10月)中被破坏.
但它可以用作移动设备的替代品,因为移动浏览器将滚动条显示为临时覆盖,不会消耗视口中的空间 – window.innerHeight和d.dE.clientHeight在这方面返回相同的值.
跨浏览器解决方案
因此,用于查找实际窗口高度的跨浏览器解决方案就像这样工作(伪代码)：
IF the size of browser scroll bars is 0 (overlay) RETURN window.innerHeight ELSE RETURN document.documentElement.clientHeight
这里的问题是如何确定给定浏览器的滚动条的大小(宽度).你需要为它运行一个测试.这并不是特别困难 – 如果您愿意,可以查看my implementation here或original one by Ben Alman.
如果您不想自己动手,也可以使用我的组件 – jQuery.documentSize – 并使用$.windowHeight() call.
