如何创建向上扩展到高度然后显示滚动条的DIV？

Question

我正在尝试实现包含一些文本的DIV，其行为方式如下：

• 固定宽度（500像素）

• 加盖高度（最高400像素）

  1. 如果文本呈现为＆lt; 400px（例如，100px高），则包含DIV的高度与文本一样多（在我们的示例中为100px）。

  2. 如果文本呈现为＆gt; 400px，则包含div的高度仅为400px，并且通过DIV中的垂直滚动条处理oveflow。

我知道如何实现＃2（overflow: auto; position: relative），但这种行为取决于height=400px当然否定＃1期望的行为。

如何通过CSS实现这一目标？

我更喜欢合理的跨平台解决方案，如果这太难了，必须适用于IE7，IE8和FireFox 10 +。

Answer 1

尝试max-height和overflow: auto;的组合。

Example

Answer 2

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

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