À l'aide de CSS max-hauteur sur une div extérieure à force de défilement sur une intérieure-div

J'ai un div extérieure avec une hauteur variable (et max-hauteur) qui est configuré avec un pixel spécifique quantité par JavaScript, contenant deux divs à l'intérieur.

  1. La 1ère div est destiné à contenir une quantité variable de contenu, par exemple une liste de liens. Il n'a pas de hauteur définie.
  2. La 2e div est destiné à contenir une quantité fixe de contenu, et a une hauteur définie.

Droit maintenant, le max-height n'est pas de travail. La 1ère div ne cesse de croître, même avec overflow: auto; ensemble, et pousse le 2ème div en dessous d'elle à l'extérieur des limites de la div extérieure. Comment puis-je faire en sorte que lors de la 1ère div devient trop grande pour que l'extérieur de la div qui contiennent à la fois elle et la fixe-hauteur de la 2ème div, le 1er div commence à défiler?

Page d'exemple: http://thevastdesign.com/scrollTest.html

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

Idées?

OriginalL'auteur Jay Neely | 2010-04-27

  1. 3

    Vous ne pouvez pas vraiment faire sans JS. Votre max-hauteur sur l'extérieur-div isnt va contrôler la hauteur de l'un de vos intérieurs divs d'invoquer son défilement. Intérieure div est toujours à la hauteur que vous avez défini (pixels, auto, etc..). Vous pouvez soit faire la totalité de la div extérieure de défilement si nécessaire au moyen d' overflow: auto ou vous pouvez définir un max de hauteur, sur le premier intérieure de la div et de l'ensemble de la zone de débordement.

    Merci, vous a aidé à déclencher une connexion qui m'a conduit à une solution d'activer JavaScript dans le JS que nous utilisons.

    OriginalL'auteur prodigitalson

  2. 2

    Compte tenu de votre installation, je voudrais faire la chose suivante (les noms de classe sont sous-entendues par votre question, ne provient pas 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 n'est pas l'adresse de la boîte de propriétés, ce qui aura un impact sur la hauteur des valeurs que vous appliquez. Le combiné des valeurs de hauteur (avec les valeurs de zone inclus) de .innerFixed et .innerFlex doit être égale à la valeur de la hauteur du conteneur.

    Si vous voulez obtenir tous les Zen et de retourner la composition verticale, vous ne faites que par le remplacement de bottom pour top sur .innerFixed et l'attribution margin-top ou padding-top à .innerFlex.

    Autre chose que j'ai remarqué, c'est que vous avez

    div.outer { float: left; }

    ...Mais compte tenu de ce que vous avez besoin de cet élément (et pour définir le contenu à droite de priorité) j'aurais plutôt suggérer que vous mettez votre grande colonne en premier dans l'ordre de la source et de les appliquer

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

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

    avec la compréhension que le margin-right de ce dernier est un peu plus grande que la width de l'ancien (plus de compte pour la gouttière entre les deux éléments). Essayez, vous allez l'aimer.

    OriginalL'auteur Ben Henick