web-dev-qa-db-fra.com

Comment redimensionner une hauteur maximale de div avec une fenêtre redimensionnée?

J'ai cherché haut et bas une réponse. J'ai lu certaines choses ici et personne ne semble avoir de solution à ce que je veux faire. Je souhaite redimensionner la hauteur maximale d'un div lorsque la taille de la fenêtre atteint un certain point. Le menu principal est au bas de la page et le contenu sort du menu en glissant 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 régler la hauteur maximale dans le fichier css actuellement, mais je n'ai pas besoin qu'elle prenne effet avant que la taille de l'écran atteigne 800 pixels en hauteur. Faites-moi savoir si quelque chose de simple me manque ici.

Je suis ouvert à l’utilisation des règles jQuery ou css.

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

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', ''); 
   }  
});
4
Shih-En Chou

Je sais que ceci est un article ancien, mais je me demande si une solution uniquement en CSS aurait été (et serait maintenant) meilleure ici?

.content {
    // No need for max-height here
}

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