Question

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

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.

I am open to using jQuery or css rules.

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