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

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（）。” - 利斯特先生2013年8月28日6:54

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

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

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