.height（）仅在窗口调整大小后使DIV可滚动

Question

此脚本的目的是制作一个100％页面高度减去顶部的DIV。

这是页面：

http://nerdi.net/playground/kev/indexNEW.html

这里它被jsFiddle剥离，它似乎在工作。

http://jsfiddle.net/JVKbR/94/

对我来说，（在Chrome和FF上）可滚动的div（.mid-col-main）只有在调整窗口大小时才会变得可滚动（最大化，从角落拖动等）

知道我做错了吗？

编辑：Jasper和Davin的解决方案都有效。谢谢。

Answer 1

您需要等待DOM准备就绪，基本上您过早运行代码并且div.mid-col-main尚不可用：

$(function () {
    var midColTopHeight = $("div.mid-col-top").height(),
        $window         = $(window),
        $midColMain     = $('div.mid-col-main');
    $window.resize(function(){
        $midColMain.height(($window.height() - midColTopHeight));
    }).trigger('resize');
});

在这里，我将绑定代码放在document.ready事件处理程序中，并在resize元素上触发了window事件。我还优化了你的代码以缓存那些没有改变的东西（你不需要在每个resize事件中选择相同的元素。）

您可以将此代码放在HTML文档的末尾（就在结束document.ready标记之前），而不是在</body>事件处理程序中运行此代码，这样您就可以使用目标将可用。