Как изменить размер div max при изменении размера окна?

Я искал высокий и низкий для ответа. Я прочитал некоторые вещи здесь, и никто, кажется, не имеет решения того, что я хочу делать. Я хочу изменить размер max max, когда размер окна достигнет определенной точки. Главное меню находится в нижней части страницы, и содержимое выходит из меню, сдвигающегося вверх.

Пример того, что у меня есть:

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

css:

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

Теперь, очевидно, я могу установить max-height в css в настоящее время, но мне не нужно, чтобы он вступил в силу до тех пор, пока размер экрана не достигнет 800 пикселей в высоту. Дайте мне знать, если мне не хватает чего-то простого здесь.

Я открыт для использования правил jQuery или css.

Ответы

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

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

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