Jquery 基于窗口大小/调整大小的div的动态最大高度

这里是编码/jQuery初学者

我试图找出如何根据屏幕大小调整div的最大高度，该div位于顶部

'.top nav'

和底部

'.footer'

div之间。基本上，加载页面或调整窗口大小时不应显示滚动条

我需要调整大小的div，

“.color container”

，包装了一系列列表，当鼠标悬停在上面时，这些列表会更改为随机颜色。如果我有足够的列表元素，我认为“.color container”的max height属性会在适当的位置将它们截断

根据我的研究，我需要调用

.resize

函数，但我似乎无法让它工作

我的jQuery代码：

function resetHeight(){
    var newHeight = $(window).height() - $('.top-nav').outerHeight() - $('.footer').outerHeight();
    $('.color-container').css('max-height', newHeight);
}

$(function(){
    newHeight();

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

---

JSFiddle:

这不是问题的确切答案，但我使用了

位置：绝对在课堂上，我希望这对你有帮助，请看一看你可能需要做的
$（窗口）。在（'resize'，function（）{…}）
工作正常。您的小提琴没有对
jquery
的引用。希望你已经包括在内了？是的，您需要在开始时调用
resetHeight（）
，而不是
newHeight（）
@GuruprasadRao提到了您需要解决的两个问题。我没有意识到。resize（…）与。on（'resize'，…）@GuruprasadRao非常感谢<问题是代码>重置高度（）

而不是

新高度（）

。随时。。快乐编码…）