Question

我有一个id为“main”的div，我想用jQuery设置它的高度，并且在window.resize上使用函数修改它的高度但是由于某种原因它只在增加窗口时才有效高度，减少时它不起作用。

这是JS：

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

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

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

编辑：问题出现增加或减少

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

console.log("resizing");

调整大小并正确记录，所以问题不是那样。

Answer 1

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

如此改变

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

到

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

将解决问题。

Answer 2

我测试了你的代码，它在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/

jQuery $（window）.resize（）在降低窗口高度时不起作用

2 个答案: