Jfiddle zeigt das Problem: Ссылка
Beachten Sie, wie sich das rosa div über die Grenzen des blauen div hinaus ausdehnt.
Ich versuche, ein einfaches Layout zu erstellen, wo ich zwei verschachtelte divs habe, die bis zu einer bestimmten Höhe expandieren (100% der Fensterhöhe ist in diesem Fall erwünscht), wobei das innere Div-Scrolling nach Bedarf weitere Inhalte anzeigt . Wenn der Inhalt also kurz ist, werden die divs alle auf die Größe des Inhalts reduziert, aber wenn sie lang ist, werden sie nur zu einem Punkt erweitert, zu welchem Zeitpunkt das innere div scrollen sollte.
Das HTML:
%Vor%Und das CSS:
%Vor% Beachten Sie, dass der Effekt der gleiche ist, wenn die maximale Höhe von topDiv auf einen Prozentsatz eingestellt ist. In diesem Szenario kann ich den maximalen Wert von insideDiv nicht einfach auf einen entsprechend kleineren Wert setzen. Auch das Festlegen der overflow -Eigenschaft auf topDiv auf hidden funktioniert nicht - der zusätzliche Inhalt in insideDiv wird einfach vollständig ausgeblendet und ist dann nicht durch Scrollen zugänglich.
Wie kann ich die Höhe von insideDiv begrenzen, um die Höhe von topDiv nicht zu überschreiten, während insideDiv bei Bedarf zusätzliche Inhalte scrollt?
Sie können die #insideDiv max-height CSS-Eigenschaft von 100% in inherit ändern. Also wird diese Regel so sein:
max-height: inherit;
Sie könnten auch box-sizing:border-box; hinzufügen, wenn Sie diese Route gehen, da dies erlaubt, dass sich die Grenzen oder das Auffüllen von #insideDiv wie gewünscht (wahrscheinlich) verhalten.
Die Ursache dieses Problems ist, dass max-height:100%; nach dem height des Elternteils sucht, nicht nach seinem max-height , wie groß es sein darf. Somit haben Sie das klassische Problem der nicht-deterministischen relativen Höhe. Wenn Sie dem Elternelement einen deterministischen height (statt max-height ) geben, kann 100% deterministisch auflösen.
Sie müssen overflow-y:auto; in #topDiv
Sie können dann Ihre Werte für die maximale Höhe beliebig ändern und sie werden wie erwartet funktionieren.
Ausgehend von meinem Verständnis Ihrer Frage. Dieser Code sollte sehr gut funktionieren!
Hier ist auch ein JSFiddle mit dem Code.