overflow - 在外部 div 上使用 CSS max-height 强制在内部 div 上滚动

Question

我有一个具有可变高度(和最大高度)的外部 div，它由 JavaScript 设置了特定的像素数量，其中包含两个 div。

1. 第一个 div 旨在容纳可变数量的内容，例如链接列表。它没有设置高度。
2. 第二个 div 旨在容纳固定数量的内容，并设置了特定的高度。

目前，最大高度不起作用。第一个 div 不断增长，即使有 overflow: auto;设置，并将其下方的第二个 div 推到外部 div 的边界之外。我怎样才能做到当第一个 div 变得太大以至于外部 div 无法包含它和固定高度的第二个 div 时，第一个 div 将开始滚动？

示例页面:http://thevastdesign.com/scrollTest.html

感谢您的帮助。我最喜欢 CSS 解决方案，即使它需要一些技巧。它只需要在 Firefox 3+、IE8 和 IE7 中工作。

想法？

Answer 1

如果没有 JS，你真的无法做到这一点。您在 outer-div 上的 max-height 不会控制其中一个内部 div 的高度来调用其滚动。内部 div 始终是您设置的高度(像素、自动等)。您可以根据需要使用 overflow: auto 使整个外部 div 滚动，或者您可以在第一个内部 div 上设置最大高度并设置溢出。