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

Question

我有一个定义了固定高度的容器 div。这个 div 包含两个子 div，它们应该有一个边距以及容器的边界作为另一个子 div。第一个子项应展开以适应其内容，而第二个子项应填满容器并在必要时显示滚动条。

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

通过对两个子元素使用绝对定位，效果很好，但它需要第一个子元素(上例中的“header”)有固定的高度。每当第一个 child 展开时，第二个 child 当然会重叠它。

参见 jsfiddle 实例 small header和 large header例如代码。

您是否知道如何以无论页眉增长多大，边距仍然适用的方式进行设计？

提前致谢!

Answer 1

您有几个选择:

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

我个人喜欢限制 header 的长度并 overflow hidden ，但这并不总是一个选项。