自动调整绝对div的高度与另一个的高度成比例

Question

我有一个定义了修复高度的容器div。这个div包含两个子div，它应该与另一个子容器的边框一样有边距。虽然第一个孩子应该扩展以适应其内容，但第二个孩子应该填满容器并在必要时显示滚动条。

这是一个工作示例的样子：

这对两个孩子使用绝对定位很有效，但它需要第一个孩子的固定高度（上例中的“标题”）。每当第一个孩子扩展第二个孩子时，当然会重叠它。

请参阅jsfiddle实例small header和large header，例如代码。

您是否知道如何设计这一点，无论标题增长多少，边距仍然适用？

提前致谢！

Answer 1

您有几个选择：

• 限制标题的长度，使它们始终为1行（使用text-overflow）
• 使用Javascript更改内容的高度减去标题的高度。
• 使用服务器端语言计算标题长度并调整内容
• 让整个内容区域滚动，以便标题可能并不总是可见。

我个人喜欢限制标题的长度而只是隐藏溢出，但这并不总是一种选择。