html - 让 div 占据其余空间（高度）？

Question

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;
}

http://jsfiddle.net/ytg8S/

我的问题是我有高度为 300 px 的容器 div，然后我有高度未知的标题（取决于它上面的项目数量和屏幕大小，它可能不止一行。）我该怎么做让 .body 占据其余空间并显示滚动，如果它的内容比空间多？

我的第一个想法是摆弄绝对定位，但是当我有不止一行 .header 项目时，这不起作用。

我无法更改由第三方组件生成的 html（我可以，但工作量很大），如果可以的话，我宁愿避免使用 javascript..

Answer 1

如果我正确理解了您的问题，那么我认为这将满足您的要求：

container > .body
{
    height: 100%;
    max-height:100%;
    overflow: auto;
    background: lightgrey;
}

Answer 2

试试这个..希望这有帮助

   .container
{
    height: 300px;
    border: black 1px solid;
    background: #D3D3D3;
}

.container > .header
{
    height:auto;
    background: grey;
    max-height: 200px;
    overflow: auto; 
}
.container > .header > span
{
    display: inline-block;
    padding: 10px;
}
.container > .header > .active
{
    background: black;
    color: white;
}

.container > .body
{
    height: auto;
    max-height: 100px;
    overflow: auto;
    background: lightgrey;
}