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

时间:2013-08-26 17:59:32

标签: javascript jquery css

this website上,我正在尝试为主要内容区域设置高度,以便它始终填充浏览器窗口高度。这是我正在使用的简单代码:

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

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

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

4 个答案:

答案 0 :(得分:1)

这是我在项目中使用的,它运作得很好:

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

这将获取窗口高度并将任何元素设置为它的高度,每当窗口调整大小时重新计算。

答案 1 :(得分:0)

您可以使用:

document.documentElement.clientHeight

答案 2 :(得分:0)

padding-bottom的{​​{1}}提出了问题

body

答案 3 :(得分:0)

编辑:我误解了这个问题......

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