Définition de la propriété max-height AND min-height en CSS (ou via jQuery)

J'ai un problème simple mais ennuyeux. Je dois définir min-height et max-height d'un élément div. Par exemple: min-height: 100px et max-height: 200px. Je charge ma page avec div hauteur 200px. Si je presse ma fenêtre de navigateur, cette div redimensionne et quand il atteint height=100px il cesse de redimensionner.Définition de la propriété max-height AND min-height en CSS (ou via jQuery)

Bien sûr min-height et max-height en CSS ne fonctionne pas. :/

Quelqu'un?

Merci.

Source

2010-06-27 Pon

Je ne comprends pas. Qu'est-ce qui ne fonctionne pas exactement? Cela ne peut pas fonctionner si vous définissez 'height' à 200px. Que se passe-t-il si vous utilisez une valeur relative pour 'height'? –

Je ne rétrécit pas à 100px de hauteur lorsque je serre la fenêtre de mon navigateur. Il reste juste à 200px. – Pon

Également défini hauteur.

min-height: 100px; 
max-height: 200px; 
height: 100%;

Source

2010-06-27 11:34:11 Sjoerd

Ne fonctionne pas non plus: [Il ne fait que définir la hauteur à 200px et quand je serre ma fenêtre de broser il ne rétrécit pas à 100px. Il reste juste avec 200px de hauteur. #wrap { \t arrière-plan: # ff0000; \t min-hauteur: 100px; \t hauteur maximale: 200px; \t hauteur: 100%; \t largeur: 100%; } – Pon

@Pon: Cela fonctionne. Vous devez avoir quelque chose d'autre sur votre page qui interfère. Pouvez-vous produire un exemple minimal avec ce style qui ne fonctionne pas pour vous? De plus, dans quel navigateur testez-vous? –

J'ai le même problème. Lorsque vous rétrécissez la page, elle conserve la hauteur maximale si j'ajoute la hauteur 100%, sinon, elle conserve la hauteur minimale. ma div est positionnée fixe. – majidarif

La hauteur minimale écrase toujours la hauteur et la hauteur maximale, vous ne pouvez donc pas utiliser les deux.

Ceci est une sorte de piratage, mais vous pouvez le faire avec des requêtes média. Si ceci est votre HTML:

<div id="myDiv"></div>

Puis ajoutez ceci à votre css:

#myDiv{ 
    height:200px;  
} 
@media screen and (max-height: 200px) { 
    #myDiv { 
     height:99vh; /*Set this with trial and error because it depends on your margins*/ 
    } 
} 
@media screen and (max-height: 100px) { 
    #myDiv { 
     height:100px; 
    } 
}

Source

2016-02-18 19:34:30

Vous pouvez utiliser les deux, mais la hauteur minimale aura la priorité si elle est en conflit avec max-height ou height. – Luke

Définition de la propriété max-height AND min-height en CSS (ou via jQuery)

Répondre

Questions connexes