Propriété CSS Max Height

Question

Existe-t-il un bon moyen, pour l’ensemble des navigateurs, de définir une propriété de hauteur maximale d’un DIV et, lorsque ce dernier dépasse la hauteur maximale, il se transforme en débordement avec des barres de défilement?

Answer 1

Malheureusement, IE6 ne le fait pas, vous devez donc utiliser une expression pour IE6, puis définir la hauteur maximale pour tous les autres navigateurs:

  div{
       _height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
       max-height: 333px; /* sets max-height value for all standards-compliant browsers */
       overflow:scroll;
}
 

Débordement: auto fonctionnerait probablement dans la plupart des cas en cas de débordement supplémentaire.

Answer 2

J'ai trouvé cette solution à partir d'un post publié en 2005 ( hack Min-Height Fast ). C'est un hack mais c'est du CSS simple et pur:

 selector {
  max-height:500px;
  height:auto !important;
  height:500px;
}
 

L'exemple est pour max-height, mais cela fonctionne pour min-height, min-width et max-width. :)

* Remarque: vous devez utiliser des valeurs absolues, les pourcentages ne fonctionnent pas.

Tout ce dont vous avez besoin maintenant, c'est du "débordement: faites défiler;" pour que cela fonctionne avec les barres de défilement

Answer 3

selector
{
    max-height:900px;
    _height:expression(this.scrollHeight>899?"900px":"auto");
    overflow:auto;
    overflow-x:hidden;
}

Answer 4

Pourriez-vous avoir un div wrapper avec la hauteur définie comme votre hauteur et débordement: défilement. Alors la div interne n’a pas de hauteur définie et à mesure qu’elle grandit, elle se remplira puis utilisera les barres de défilement de la première div?

Answer 5

Principal hack (style RedWolves):

 .divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
 

Je ne recevais aucun amour de l'attribut max-height, donc j'avais déjà ceci et j'ai réussi avec ces 2 classes. Mais c’est moche alors dans la recherche d’une meilleure réponse à cette question. Avec divMax, position:absolute laisse apparaître le contenu sous-jacent, mais contrôle la hauteur ultime de divInner à 200px.