jQuery $(window).resize() 在减小窗口高度时无法工作

Question

jQuery $(window).resize() 在减小窗口高度时无法工作

3

我可以帮您翻译成中文。这段内容是关于如何使用jQuery设置具有ID“main”的div的高度，并在窗口大小改变时通过函数修改其高度。但是，有时候当缩小窗口高度时，它无法正常工作。以下是JS代码：

function setMainH() {
    var docH = $(document).height();
    $("#main").height(docH - 40);
}

$(function() {
    setMainH();
});

$(window).resize(function() {
    setMainH();
});

编辑：问题似乎会随着大小的增加或减少而出现。

编辑2： resize() 事件似乎被正确调用了，我已经尝试过。

console.log("resizing");

在调整大小时，它正确地记录日志，因此问题并不在于此。

- Matteo Pagliazzi

1

无论窗口大小如何，$(document).height();始终保持不变。它取决于文档的内容。 - Esailija

Matteo，如果您想获取当前视口的高度，请使用$(window).height()。 - Rob W

使用 $("html").height() 作为参考，它可以工作！ - Matteo Pagliazzi

2个回答

1

我测试了你的代码，当在body或head中不使用包装时，在jsfiddle中运行JS正常。

你的代码演示: http://jsfiddle.net/H5y5e/2/

但是你可以优化一下你的代码，清除全局空间并缓存$(document)和$('#main')选择器，这样它们就不必在每个resize事件（窗口调整大小时产生大量事件）中被查找：

$(function() {
    var $document = $(document),
        $main     = $('#main');

    $(window).resize(function() {
        $main.height($document.height() - 40);
    }).trigger('resize');
});

这是一个演示：http://jsfiddle.net/H5y5e/1/ 更新看起来这可以很容易地只用 CSS 实现（这总是好的，可以处理某些人关闭了 JS 的情况）：

#main {
    position : absolute;
    top      : 0;
    left     : 0;
    bottom   : 40px;
    width    : 100%;
}

使用纯CSS的演示：http://jsfiddle.net/H5y5e/3/

- Jasper

CSS很酷，但我的body有填充，所以我无法为它设置100％的高度。 - Matteo Pagliazzi

如果您想使用JS，那是您的选择，但在大多数情况下可以使用CSS。我只是想指出一下，以防您认为这只能通过JS完成。 - Jasper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vilius Paulauskas · Accepted Answer

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

所以更改

var docH = $(document).height();

为了

var docH = $(window).height();

会解决这个问题。