¿Cómo cambiar el tamaño de la altura máxima de un div al cambiar el tamaño de la ventana?

Question

He estado buscando respuestas altas y bajas. He leído algunas cosas aquí y nadie parece tener una solución para lo que quiero hacer. Estoy queriendo cambiar el tamaño de la altura máxima de un div cuando el tamaño de la ventana llega a cierto punto. El menú principal se encuentra en la parte inferior de la página y el contenido sale del menú deslizándose hacia arriba.

Ejemplo de lo que tengo:

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

css:

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

Ahora, evidentemente, puedo establecer el máximo de la altura en el css actualmente, pero no necesito que entre en vigor hasta el tamaño de la pantalla alcanza 800px de altura. Avísame si me falta algo simple aquí.

Estoy abierto a utilizar las reglas jQuery o css.

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

Answer 2

Tengo un ejemplo: http://jsfiddle.net/sechou/WwpuJ/

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