计算填充浏览器高度所需的确切高度

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