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

Question

在这个网站上，我正在尝试为主要内容区域设置一个高度，以便它始终填充浏览器窗口的高度。这是我正在使用的简单代码：

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

top-of-nav是主要区域（猫图像所在的位置），40px 是我要减去的页面底部导航栏的高度。

问题是即使我减去超过 40 像素，我也会在浏览器中看到垂直滚动条。

Answer 1

这是我在项目中使用的，效果很好：

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

这需要窗口高度并将任何元素设置为其高度，每当窗口调整大小时都会重新计算。

Answer 2

你可以使用这个：

document.documentElement.clientHeight

Answer 3

padding-bottom你body的问题

body {
    padding-bottom: 0;
}

Answer 4

编辑：我误读了这个问题......

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