使用Javascript检测查看区域的高度答案

【问题标题】：Detecting height of viewing area using Javascript使用Javascript检测查看区域的高度
【发布时间】：2010-11-01 10:37:13
【问题描述】：

我想使用 Javascript 检测可视区域的高度。我有这个高度为 550px 的 DIV，我想在浏览器上显示它。但是，此高度可能会导致垂直滚动条出现在某些浏览器上（取决于用户安装了多少工具栏）。在这种情况下，我想检测到这一点，并提醒用户。

我尝试使用document.body.clientHeight，但它似乎不起作用...当我尝试添加新工具栏并刷新页面时，给了我相同的高度。

【问题讨论】：

标签： javascript dom browser height

【解决方案1】：

这应该可以帮助您： http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

【讨论】：

+1 表示非库内解决方案。我们不能仅仅为了避免多写 5 或 6 行而加载 +-1000 行的完整库。

【解决方案2】：

在 jQuery 中非常简单（并且在不同平台上运行良好）：

<html>
    <head>
        <title>Heyo</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function(){
                alert($(window).height());
                });
        </script>
    </body>
</html>

Documentation here

【讨论】：

-1：这只是整个内容的高度，而不是窗口高度。（例如，我的内容是 1450 像素高，但我的窗口只有 641 像素。$(window).height() 返回 1450。）

【解决方案3】：

使用 YUI 也很容易。

<html>
 <head>
  <title>Heya</title>
  <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0b1/build/yui/yui-min.js"></script>
 </head>
 <body>
   <script type="text/javascript">
    YUI().use('node', function(Y) {
      alert(Y.get(document).get('winHeight'));
    });
   </script>
 </body>
</html>

Documentation here

【讨论】：