如何在窗口调整大小时调整 div 最大高度？答案

【问题标题】：How to resize a div's max-height upon window resize?如何在窗口调整大小时调整 div 最大高度？
【发布时间】：2012-08-16 05:28:58
【问题描述】：

我一直在寻找答案。我在这里通读了一些东西，似乎没有人能解决我想做的事情。当窗口大小达到某个点时，我想调整 div 的最大高度。主菜单在页面底部，内容从菜单上滑出。

我所拥有的示例：

<div class="content">
    //some content pics/text etc.
</div>

css：

.content { width: 550px; overflow: auto; }`

现在显然我可以在css中设置max-height，但我不需要它在屏幕尺寸达到800px高度之前生效。如果我在这里遗漏了一些简单的东西，请告诉我。

我愿意使用 jQuery 或 css 规则。

【问题讨论】：

所以基本上当屏幕达到 800px 或更少时，你想设置一个max-height 样式，否则你不希望它有一个max-height？

标签： jquery html css

【解决方案1】：

$(window).on('resize', function(){
    if($(this).height() <= 800){
        $('.content').css('max-height', '800px'); //set max height
    }else{
        $('.content').css('max-height', ''); //delete attribute
    }
});

【讨论】：

嘿，如果你还在看这个，我可以问一个关于 jQuery 和 max-height 不能相互配合的快速问题
我正在使用 jQuery 滚动条。当我在 div.content 上使用 max-height 属性时，它会删除 jquery 滚动条并将其替换为普通滚动条。当我删除最大高度时使用 jquery 滚动条。
我的意思是另一个问题...您之前的回答是针对我遇到的另一个问题。对于造成的混乱，我深表歉意。

【解决方案2】：

我有一个例子：http://jsfiddle.net/sechou/WwpuJ/

$(window).resize(function () { 
   if($(window).height() <= 800){
       $('div.content').css('max-height', 800);
   }else{
       $('div.content').css('max-height', ''); 
   }  
});

【讨论】：

这是一个很好的例子。如果将其调整为原始大小，我会将其作为我接受的答案。 +1 岁

【解决方案3】：

我知道这是一篇过时的帖子，但我想知道纯 CSS 的解决方案是否会（现在会更好）在这里更好？

.content {
    // No need for max-height here
}

@media(max-height:800px){
    .content {
        max-height:800px;
    }
}

【讨论】：