CSS Hauteur Max de la Propriété

Est-il un bon de la croix-navigateur manière de définir une max-height propriété d'un DIV et quand DIV va au-delà de la max-height, il se transforme en un dépassement de capacité avec les barres de défilement?

vous ne pourriez pas vous il suffit de régler la hauteur de votre max de hauteur et de définir la overflow: scroll; ?
Qui fonctionne à l'aide d'une hauteur statique par exemple 200px. Toutefois, si votre taille est un pourcentage par exemple, 100%, puis débordant de contenu remplace la hauteur spécifiée et il suffit de les étirer élément au lieu de découper ou de l'introduction de barres de défilement.

InformationsquelleAutor Ryan Smith | 2008-11-18

css overflow

35

Malheureusement IE6 n'est pas, donc vous devez utiliser une expression pour IE6, puis définissez le max de hauteur 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;
}
```
Overflow:auto seraient les plus susceptibles de travailler dans la plupart des cas, pour avoir un extra déborder.
- Il y a un problème avec cette... il génère un avertissement sur IE6 sur le contenu actif.
- je n'ai jamais utilisé visual studio, mais le css expression() est unique pour internet explorer j'espère donc leurs outils de dev reconnaîtrait.
- overflow:auto et overflow-x:hidden FTW!! 🙂 merci pour la correction
- J'ai essayé de faire cela sur un tableau de bord de l'INTERFACE utilisateur, j'ai été la construction en jQuery et en proie à de graves retard dans IE... Méfiez-vous des problèmes de performances.
- assurez-vous que vous utilisez uniquement pour la version IE vous devez avoir pour. IE 6 n'est pas le meilleur moteur de rendu de la performance sage, alors il doit avoir des problèmes dans beaucoup d'endroits.
- alternativement, nous pourrions arrêter de soutenir IE 6
- Aujourd'hui, j'ai trouvé un problème avec cette solution largement: en Raison d'une sorte de navigateur de synchronisation/charge des questions, l'expression n'est pas toujours évalué. En tapant CTRL-F5 pour assurer l'actualisation d'environ 50% de taux de réussite... je serais favorable à une interdiction de IE6!
InformationsquelleAutor ethyreal
16

J'ai trouvé cette solution à partir d'un poste faite en 2005 (Min-Height Rapide hack). C'est un hack, mais c'est simple et pur CSS:
```
selector {
  max-height:500px;
  height:auto !important;
  height:500px;
}
```
L'exemple est pour max-height, mais il travaille pour le min-height, min-width et max-width. 🙂

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

Tous vous avez besoin maintenant, c'est le "overflow:scroll;" pour faire ce travail avec des barres de défilement
- Cela ne fonctionne que dans IE6 (le seul navigateur qui a besoin d'un hack à tous les plus de cette dernière) pour min-width/height, pas max-width/height.
- Correction (à partir de la spécification): "Le pourcentage est calculé par rapport à la hauteur de la boîte du bloc contenant." en tant que tel, le parent doit avoir une hauteur définie pour min/max hauteur (ou largeur) pour être utilisé.
InformationsquelleAutor Mottie

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

Quiconque essayer celui-ci avec succès?

InformationsquelleAutor KrisK

1

Pouvez-vous avoir un wrapper de div avec la hauteur de la définir comme votre taille et votre overflow: défilement. Ensuite, l'intérieur de la div n'a pas de hauteur définie et à mesure qu'il grandit, il remplira ensuite, utilisez les barres de défilement de la première div?
- Bonne pensée, mais encore, elle nécessite la définition d'une taille de base de plus que ce qu'il veut pour un élément de niveau bloc. Sinon, il venait juste de régler la hauteur de l'élément, il est vraiment inquiète.
InformationsquelleAutor RedWolves
0

Majeur hack (RedWolves de style):
```
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
```
J'étais pas d'amour de la max-attribut hauteur alors j'ai eu cette alreadyand réussi avec ces 2 classes. Mais c'est moche donc dans la recherche pour mieux frapper à cette question. divMax avoir position:absolute permet contenu derrière, mais les contrôles de l'ultime hauteur de divInner de 200px.

InformationsquelleAutor gordon

-1

J'ai trouvé ce de http://www.tutorialspoint.com/css/css_scrollbars.htm et un peu modifié. Il semble à la fois pour IE9 et FF19

<style type="text/css">
.scroll{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;

    max-height:100px;
    overflow:scroll;
}
.auto{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;
    height: 100px !important;
    max-height:110px;
    overflow:hidden;
    overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>

<div class="scroll">
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>        
     </div>

<br />
<p>Example of auto value:</p>

<div class="auto">
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
   </div>

InformationsquelleAutor Zhou

Vous devez vous connecter pour publier un commentaire.