如何在窗口调整大小时调整div的最大高度？-Howtoresizeadiv'smax-heightuponwindowresize?

I have been searching high and low for an answer. I have read through some things on here and no one seems to have a solution to what I am wanting to do. I am wanting to resize a div's max-height when the window size reaches a certain point. The main menu is at the bottom of the page and the content comes out of the menu sliding upwards.

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

Example of what I have:

我的例子:

    //some content pics/text etc.

css:

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

Now obviously I can set the max-height in the css currently but I don't need it to take effect until the screen size reaches 800px in height. Let me know if I am missing something simple here.

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

I am open to using jQuery or css rules.

我愿意使用jQuery或css规则。

2 个解决方案

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

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