如何在窗口resize时调整div的最大高度？

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

我的例子：

 //some content pics/text etc.  

CSS：

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

现在显然我可以在css中设置最大高度但是我不需要它才能生效，直到屏幕尺寸达到800px的高度。 如果我在这里遗漏了一些简单的信息，请告诉我。

我愿意使用jQuery或css规则。

Answer 1

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

Answer 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', ''); } });