web-dev-qa-db-fra.com

Propriété de hauteur maximale CSS

Existe-t-il un bon cross-browser moyen de définir un max-height propriété d'un DIV et lorsque ce DIV dépasse le max-height, ça se transforme en débordement avec des barres de défilement?

overflowcss
47
Ryan Smith

Malheureusement, IE6 ne fonctionne 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 très probablement dans la plupart des cas pour avoir un débordement supplémentaire.

35
ethyreal

J'ai trouvé cette solution à partir d'un article publié en 2005 ( hack rapide à hauteur minimale ). C'est un hack mais c'est du CSS simple et pur:

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

L'exemple concerne la hauteur maximale, mais il fonctionne pour la hauteur minimale, la largeur minimale et la largeur maximale. :)

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

Tout ce dont vous avez besoin maintenant est le "débordement: faites défiler;" pour que cela fonctionne avec des barres de défilement

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

Pourriez-vous avoir un div wrapper avec la hauteur définie comme hauteur et débordement: défilement. Ensuite, le div intérieur n'a pas de hauteur définie et à mesure qu'il grandit, il se remplit, puis utilisez les barres de défilement du premier div.

1
RedWolves

Hack majeur (style RedWolves):

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

Je n'obtenais aucun amour de l'attribut max-height, donc je l'avais déjà et j'ai réussi avec ces 2 classes. Mais c'est moche donc dans la recherche de mieux frapper cette question. divMax ayant position:absolute laisse passer le contenu en dessous mais contrôle la hauteur ultime de divInner à 200px.

0
gordon