計算和分配之間的高度顯示不同

我目前正在全屏網站上工作。它有一個主要的內容部分，一個標題和一個導航欄。我的目標是擁有一個固定高度的標題和導航，以及一個動態適合的內容。我一直對這個項目進行了兩天知道，我的算法調整工作罰款直到如今計算和分配之間的高度顯示不同

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

日誌說：

現在，主要的內容只用時消失Mozilla Firefox 23.0.1。在其他瀏覽器中一切正常。通過調試，我發現newHeight會變成負值。經過一些更多的調試後，我很困惑下面的結果。 A screenshot of Firebug's debugging surface

正如圖片所示，可變newHeight已被設置爲21縱然innerHeight值是629！此外，在改變窗口大小時，值21似乎不會改變（儘管629確實如此）。

我不知道我已經做了什麼來實現這個錯誤或如何解決這個問題。

來源

2013-08-27 Rafael Bankosegger

似乎在一個簡單的測試中正常工作：http://jsfiddle.net/cg8Qa/。記錄數值時會發生什麼？ –

您是否添加了將爲newHeight賦值的任何監視表達式？ – Krishna

向問題添加了日誌數據。 NewHeight封裝在'resizeBg'中，我沒有任何其他方法搞亂它。 –

innerHeight上的jQuery頁面顯示：「此方法不適用於窗口和文檔對象;對於這些，請使用.height（）。」 - 雷斯特先生13年8月28日在6:54

李斯特先生是正確的。我將代碼更改爲：

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

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

來源

2014-03-05 10:51:46

計算和分配之間的高度顯示不同

回答

相關問題