Come ridimensionare l'altezza massima di un div al ridimensionamento della finestra?

Question

Ho cercato in alto e in basso per una risposta. Ho letto alcune cose qui e nessuno sembra avere una soluzione a quello che voglio fare. Sto cercando di ridimensionare l'altezza massima di un div quando la dimensione della finestra raggiunge un certo punto. Il menu principale si trova nella parte inferiore della pagina e il contenuto esce dal menu che scorre verso l'alto.

Esempio di ciò che ho:

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

css:

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

Ora, ovviamente, è possibile impostare il max-height nel css attualmente, ma non ho bisogno di prendere effetto fino a la dimensione dello schermo raggiunge 800px in altezza. Fammi sapere se mi manca qualcosa di semplice qui.

Sono aperto all'utilizzo delle regole 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

Ho un esempio: http://jsfiddle.net/sechou/WwpuJ/

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