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

此脚本的目的是使页面高度减去顶部的100％的DIV。.height（）仅在调整窗口大小后使DIV可滚动

这里的页面：

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

这被剥离下来的jsfiddle，它似乎是工作。

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

对我来说，（在Chrome和FF）的滚动DIV（.MID-COL-主）才成为滚动时调整窗口大小（最大化，从角落里拖，等）

任何想法我做错了什么？

编辑：贾斯珀和达文的解决方案都工作。谢谢。

来源

2012-01-13 elzi

如果你像我一样无法理解这一点，你可以用一个简单的'$（window）.resize（）'来轻松解决这个问题。 – davin 2012-01-13 23:19:09

那就在那里... – elzi 2012-01-13 23:21:59

不，它不是。你的版本不起作用，因为它实际上并没有等待页面加载，而是立即执行代码。而这显然不会工作，因为DOM没有准备好。您需要将其更改为'window.onload = function（）{$（window）.resize（）; };' – davin 2012-01-13 23:27:00

你需要等待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事件处理中的绑定代码并在window元素上触发resize事件。我还对代码进行了一些优化，以缓存不变的内容（每个resize事件不需要选择相同的元素）。

而不是运行在document.ready事件处理程序的代码，你可以把这个代码在HTML文档的末尾（在结束</body>标记之前），这样，你想要的目标将是可用的元素。

来源

2012-01-13 23:30:33 Jasper

谢谢。 @davin在OP评论中的解决方案也很有效，但这看起来更干净。非常感激。 – elzi 2012-01-13 23:35:51

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

回答

相关问题