計算填充瀏覽器高度所需的確切高度

Question

在this website上，我試圖設置主內容區域的高度，以便它總是填充瀏覽器窗口高度。下面是簡單的代碼我使用：

$(".top-of-nav").height($(window).height() - 40); 

top-of-nav的主要區域（如貓圖像）〜40點是在頁面底部的導航欄，我正在減去高度。

問題是，即使我減去40px以上，我也會在瀏覽器中獲得垂直滾動條。

Answer 1

您body的padding-bottom使問題

body { 
    padding-bottom: 0; 
} 

Answer 2

您可以使用此：

document.documentElement.clientHeight 

Answer 3

這是我使用的一個項目是什麼，以及它工作得很好：

$(window).resize(function() { 
    var window_h = $(window).height(); 
    $('.viewport').css('height',window_h); 
}); 

這需要窗口高度並設置任何元素的高度，每當t時重新計算他調整窗口大小。

Answer 4

編輯：我誤解了問題...

.top-of-nav { 
    top: 0; 
    bottom: 40px; 
    margin: 0; 
    background: url(/media/1920x1080.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
}