css - 如何创建一个扩展到一个高度然后显示滚动条的 DIV？

Question

我正在尝试实现一个DIV包含一些文本的，并且行为如下：

• 固定宽度（500px）

• 上限高度（最多 400 像素）

  1. 如果文本呈现为 <400 像素（例如，100 像素高），则包含的 DIV 与文本一样高（在我们的示例中为 100 像素）。

  2. 如果文本渲染到 >400px，则包含 div 的高度只有 400px，并且通过 DIV 中的垂直滚动条处理 oveflow。

我知道如何实现 #2 ( overflow: auto; position: relative)，但这种行为取决于height=400px当然否定 #1 所需的行为。

这如何通过 CSS 实现？

我更喜欢一个合理的跨平台解决方案，如果这太难了，必须在 IE7、IE8 和 FireFox 10+ 上工作。

Answer 1

Try a combination of max-height and overflow: auto;.

Example.

Answer 2

您可以使用该max-height属性而不是height，但它在 IE6 中不起作用，它不尊重任何最小/最大属性。

如果必须使用 IE6，您将不得不使用 Javascript（唯一的其他方法是使用 IE 的专有 CSS 表达式，但它们的性能非常差，并且无论如何都依赖 JS 来启用）。