HTML
<div class="container">
<div class="header">
<span>
<span>First</span>
</span>
<span>
<span>Second</span>
</span>
<span class="active">
<span>Thrid</span>
</span>
</div>
<div class="body">
<div class="Control1">
Content!
</div>
</div>
</div>
CSS
.container
{
height: 300px;
border: black 1px solid;
}
.container > .header
{
background: grey;
}
.container > .header > span
{
display: inline-block;
padding: 10px;
}
.container > .header > .active
{
background: black;
color: white;
}
.container > .body
{
height: 100%;
overflow: auto;
background: lightgrey;
}
我的问题是我有高度为 300 px 的容器 div,然后我有高度未知的标题(取决于它上面的项目数量和屏幕大小,它可能不止一行。)我该怎么做让 .body 占据其余空间并显示滚动,如果它的内容比空间多?
我的第一个想法是摆弄绝对定位,但是当我有不止一行 .header 项目时,这不起作用。
我无法更改由第三方组件生成的 html(我可以,但工作量很大),如果可以的话,我宁愿避免使用 javascript..