如何使用动态标题 div 设置内容区域 div 高度

Question

我正在设计一个具有标题和内容区域的容器样式，如下所示。

  widget control
------------------
| header text    |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

我曾经使用绝对位置，顶部，底部，左侧，右侧设置为0来填充空格和如果添加了更多项目，则在内容区域中显示滚动条。

但是，当标题文本太长导致 2 行或更多行时，会出现问题：

 widget control
------------------
| header text    |
| long text here |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

现在，标题区域变高了，我的绝对定位失败导致内容区域与标题区域重叠。

我已经在小提琴上设置了简单的例子。此示例不使用位置绝对方法，因此重叠消失了，但是由于标题区域大小无法预先确定，因此我有时间弄清楚如何设置内容区域的高度，以便滚动条适合其余内容区域。(显示滚动条被切断的小提琴，因为内容区域高度设置为 100%，即控件本身的 100% 高度(即 100px(

http://jsfiddle.net/Lguwvwou/13/

请注意，我正在寻找仅使用 CSS 的解决方案，并且不允许设置静态内容区域高度(例如 50px(。原因是这是小部件控件，用户可以设置控件的高度，但他们无法控制在标题或内容区域设置高度。

因此，如果用户为控件设置 300px 高度，则长标题文本可能会占用 100px。然后，内容区域高度的剩余高度为 200px。

提前谢谢。

Answer 1

我知道如何做到这一点的唯一方法是使用 flexbox：

.container { 
    width: 300px;
    height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
.head {
    border: 1px solid blue;
    width: 100%;
    flex-shrink: 0;
}
.content {
    border: 1px solid green;
    overflow-x: hidden;
    overflow-y: scroll;
}

<div class='container'>
    <div class='head'> this is head second line asdlkfj aslkf j;alksdj f;laksdjf;laksdjf;laskdf</div>
    <div class='content'>
        <div class='item'>item1</div>
        <div class='item'>item2</div>
        <div class='item'>item3</div>
        <div class='item'>item4</div>
        <div class='item'>item5</div>
        <div class='item'>item6</div>
    </div>
</div>

更新的 JSFiddle： http://jsfiddle.net/Lguwvwou/19/