javascript - 计算和分配之间的高度似乎不同

Question

我目前正在开发一个全屏网站。它有一个主要的内容部分、一个标题和一个导航栏。我的目标是拥有一个固定高度的标题和导航，以及一个动态匹配的内容。我已经在这个项目上工作了几天知道，我的调整大小算法直到现在都运行良好：

var resizeBg = function() 
{
    var newHeight = $(window).innerHeight();

    console.log($(window).innerHeight());

    console.log(newHeight);

    newHeight -= $("#navBar").height();

    console.log(newHeight);

    newHeight -= $("#mainHeader").height();

    console.log(newHeight);

    $("#mainContent").css("height", newHeight + "px");
};

$(window).load(resizeBg);

$(window).resize(resizeBg);

日志说：

21
21
-45
-128

现在，当使用 Mozilla Firefox 23.0.1 时，主要内容就消失了。在其他浏览器中一切正常。通过调试，我发现这newHeight会变成负面的。经过更多调试后，我对以下结果感到非常困惑。

如图所示，变量newHeight已设置为，21即使innerHeight值为629! 此外，21当改变窗口大小时，值似乎没有改变（尽管629会改变）。

我不知道我做了什么来实现这个错误或如何解决这个问题。

Answer 1

innerHeight 上的 jQuery 页面说，“此方法不适用于窗口和文档对象；对于这些，请改用 .height()。” – Lister 先生 2013 年 8 月 28 日在 6:54

李斯特先生是对的。我将代码更改为：

var resizeBg = function() 
{
    var newHeight = window.innerHeight - $("#navBar").height() - $("#mainHeader").height());

    $("#mainContent").css("height", newHeight + "px");
}