Utilisation de CSS max-height sur un div externe pour forcer le défilement d'un div interne

Question

J'ai une div externe avec une hauteur variable (et max-height) qui est définie avec une quantité de pixels spécifique par JavaScript, contenant deux div à l'intérieur.

1. Le 1er div est destiné à contenir une quantité variable de contenu, par ex. une liste de liens. Il n'a pas de hauteur définie.
2. La 2e div est destinée à contenir une quantité fixe de contenu et a un ensemble de hauteur spécifique.

À l'heure actuelle, la hauteur maximale ne fonctionne pas. Le 1er div continue de grandir, même avec overflow: auto; régler, et pousse le 2e div ci-dessous en dehors des limites de la div externe. Comment puis-je faire en sorte que lorsque la 1ère div devient trop grande pour que la div extérieure contienne à la fois la div et la 2ème div à hauteur fixe, la 1ère div commencera à défiler?

page Exemple: http://thevastdesign.com/scrollTest.html

Merci pour toute aide. J'apprécierais le plus une solution CSS, même si elle nécessite quelques hacks. Il doit seulement fonctionner dans Firefox 3+, IE8 et IE7.

Des idées?

Answer 1

Vous ne pouvez pas vraiment faire cela sans JS. Votre max-height sur le div-outer ne va pas contrôler la hauteur de l'un de vos divs internes pour invoquer son défilement. Cette div interne sera toujours la hauteur que vous définissez (pixels, auto, etc.). Vous pouvez soit faire défiler l'intégralité de la div externe en utilisant overflow: auto ou vous pouvez définir une hauteur maximale sur la première div interne et définir le débordement.

Answer 2

Compte tenu de votre configuration, je ferais les éléments suivants (les noms de classe sont impliqués par votre question, non tirée de la source liée):

div.outer { 
    position: relative; 
    max-height: $length(y); 
    overflow: hidden; 
} 

div.innerFixed { 
    position: absolute; 
    bottom: 0; 
    height: $length(y); 
    overflow: hidden;  /* just in case, to keep things from 
           blowing out into all manner of crazy */ 
} 

div.innerFlex { 
    max-height: $length(y); 
    overflow: auto; 

}

Ces règles ne traitent pas les propriétés de la boîte , ce qui aura un impact sur les valeurs de hauteur que vous appliquez. Les valeurs de hauteur combinées (avec les valeurs de boîte incluses) de .innerFixed et .innerFlex doivent être égales à la valeur de hauteur du conteneur.

Si vous voulez obtenir tous Zen et retourner la composition verticale, vous le faites en échangeant bottom pour top sur .innerFixed et l'affectation margin-top ou padding-top à .innerFlex.

Quelque chose d'autre, j'ai remarqué est que vous avez

div.outer { float: left; } 

... Mais étant donné ce que vous avez besoin de cet élément (et pour définir la priorité du contenu à droite) à la place, je suggère que vous mettez votre grand la première colonne de l'ordre de source et appliquer

div.mainContent { 
    float: right; 
    width: $length(x); 
} 

div.outer { /* i.e., the column that started the discussion */ 
    margin-right: length(x); 
} 

, étant entendu que le margin-right de celui-ci est légèrement supérieure à la width de la première (supérieure pour tenir compte de la gouttière entre les deux éléments). Essayez-le, vous l'aimerez.