CODEWITHSUNDEEP
jqueryhtmlcss
Anthony Russo
Anthony Russo

Reputation: 931

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

Upvotes: 15

Views: 51085

Answers (3)

Antony
Antony

Reputation: 4364

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
}

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

Upvotes: 0

Shih-En Chou
Shih-En Chou

Reputation: 4195

I have an example: http://jsfiddle.net/sechou/WwpuJ/

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

Upvotes: 5

Adam Merrifield
Adam Merrifield

Reputation: 10407

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

Upvotes: 34

Related Questions