Comment redimensionner la hauteur maximale d'une div lors du redimensionnement de la fenêtre?

J'ai été à la recherche haute et basse pour une réponse. J'ai lu à travers certaines choses ici et personne ne semble avoir une solution pour ce que je suis désireux de le faire. Je suis désireux de redimensionner une div max-hauteur lorsque la taille de la fenêtre atteint un certain point. Le menu principal est au bas de la page et le contenu vient de sortir du menu coulissant vers le haut.

Exemple de ce que j'ai:

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

css:

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

Maintenant, évidemment, je peux mettre le max-hauteur dans le css mais je n'ai pas besoin qu'il prenne effet jusqu'à ce que la taille de l'écran atteint 800px de hauteur. Permettez-moi de savoir si je suis absent quelque chose de simple ici.

Je suis ouvert à l'utilisation de jQuery ou de règles css.

source d'informationauteur Anthony Russo | 2012-08-16

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

    J'ai un exemple: http://jsfiddle.net/sechou/WwpuJ/

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