我正在设计一个具有标题和内容区域的容器样式,如下所示。
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。
提前致谢。
答案 0 :(得分:2)
我知道如何做到这一点的唯一方法是使用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/