Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

jquery

css

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.

like image 899
Anthony Russo Avatar asked Aug 16 '12 05:08

Anthony Russo


People also ask

How do I resize a content to fit in a div?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do I keep my div from moving when I resize windows?

first add a parent div/wrap and put those two divs of yours into it. Overall, whatever size you add to the min-width itll scale the parent div down to the size specified. once the window is sized down past your specified size, itll behave like any other window. this is my way of doing it.


2 Answers

$(window).on('resize', function(){
    if($(this).height() <= 800){
        $('.content').css('max-height', '800px'); //set max height
    }else{
        $('.content').css('max-height', ''); //delete attribute
    }
});
like image 158
Adam Merrifield Avatar answered Oct 22 '22 04:10

Adam Merrifield


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', ''); 
   }  
});
like image 5
Shih-En Chou Avatar answered Oct 22 '22 06:10

Shih-En Chou