如何在内容区域中制作具有最大高度和滚动条的缩小以适应容器？答案

【问题标题】：How to make a shrink-to-fit container with max-height and scrollbars in the content area?如何在内容区域中制作具有最大高度和滚动条的缩小以适应容器？
【发布时间】：2011-05-30 17:29:35
【问题描述】：

我正在尝试实现类似于带有标题和可滚动内容区域的常规窗口窗口。 .frame 会缩小以适应其可变大小的内容，并且仅受 max-width/max-height 的限制：

<div class="frame">
    <div class="title">title</div>
    <div class="content scrollable">content of variable width/height</div>
</div>

所以，基本上，没有设置外部width/height，.frame width/height 仅受max-width、max-height 的限制，除了.frame 缩小以适应其内容。结果看起来就像一个带有标题栏和变量 width/height 内容的常规 Windows 窗口，如果框架的 height/width 超过某些最大值，它应该滚动。

如何在 CSS 中完成？

【问题讨论】：

标签： html css scroll containers

【解决方案1】：

div.frame
{
max-width: 400px;
max-height: 200px;
overflow: auto;
}

Fiddle

【讨论】：

哇！我什至没有想过添加一个显示这样疯狂的解决方案：固定；到.title！谢谢！ CSS 真是个疯狂的世界！！！
如果这对您有用，您可以将答案标记为“正确”！
不是“显示：固定”而是“位置：固定”
是的，很抱歉，当然，在尝试了几个小时找到解决方案后感到疲倦。
没有问题伙伴。发生在我们最好的人身上！