How to resize a div's max-height upon window resize?

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.

Example of what I have:

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


.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.

I am open to using jQuery or css rules.


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

I have an example:

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

I know this is an oldish post but I wonder if a CSS only solution would have been (and would now be) better here?

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

    .content {

Need Your Help

I want my RecyclerView to not recycle some items

android android-layout android-recyclerview

I'm using a RecyclerView with heterogeneous views inside, as seen in this tutorial.

Using Cocoa NSSavePanel in Sandbox causes Assertion failure

swift xcode macos cocoa nssavepanel

I'm trying to use the NSSavePanel and added this line to my code.