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 的解决方案，并且设置静态内容区域高度（ex 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/

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

1 个答案: