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

【问题标题】：Dynamic max-height for div based on window size/resize基于窗口大小/调整大小的 div 动态最大高度
【发布时间】：2015-09-03 14:51:59
【问题描述】：

这里是编码/jQuery 初学者。

我试图弄清楚如何根据屏幕尺寸调整 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：http://jsfiddle.net/tgdude/2qsq725e/14/

【问题讨论】：

你可能需要做$(window).on('resize',function(){...})
工作正常here。你的小提琴没有提到jquery。希望你把它包括在内？是的，您需要在开始时致电 resetHeight() 而不是 newHeight()
@GuruprasadRao 提到了您需要解决的 2 个问题。我没有意识到 .resize(...) 和 .on('resize',...) 是一样的
@GuruprasadRao 非常感谢！ resetHeight() 而不是 newHeight() 是问题所在。
任何时候..快乐编码..:)

标签： jquery html css

【解决方案1】：

这不是问题的确切答案，但我在课堂上使用了position: absolute;，希望对您有所帮助，请查看http://jsfiddle.net/2qsq725e/19/

【讨论】：