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

Question

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

我的例子:

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

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