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

我有一个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"); 

resize，它正确记录，所以问题不是那样。

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事件（这是一吨窗口resize时的事件）：

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

这是一个演示： http ： //jsfiddle.net/H5y5e/1/

UPDATE

而且看起来这很容易就可以用CSS完成（总是好的，处理有人关闭JS的边缘情况）：

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

使用CSS进行演示： http ： //jsfiddle.net/H5y5e/3/