使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像素的容器div，然后我有一个未知高度的头部（取决于项目数量和屏幕大小，它可能超过一行）。如何使.body占用剩余空间，并在其内容超出空间时显示滚动条？

我的第一个想法是调整绝对定位，但当我有多行.header项时，这并不起作用。

我不能更改HTML，因为它是由第三方组件生成的（好吧，我可以，但那将是很多工作），如果可以的话，我宁愿避免使用JavaScript。

- Peter

---

尝试在.container > .body内部使用overflow-y: scroll;。 - KBN

您想在标题栏内添加滚动条吗？ - Kingk

@Kingk 头部应该始终可见。 - Peter

Answer 1

如果我正确理解了你的问题，那么我认为这个代码可以实现你想要的功能：

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

- Billy Moat

---

这不起作用，因为您需要同时将body和html的高度设置为100％才能使其起作用。即使如此，当页面内容超过屏幕高度时，仍会出现问题。 - Salvatorelab

如果我理解正确的话，OP正在一个高度为300像素的容器中工作，因此他没有使用页面的全部高度。考虑到这一点，我认为我的解决方案是在.body DIV中添加最大高度为100%。 - Billy Moat

抱歉，我没有理解这个问题。您说得对，他正试图填充一个固定高度的div的剩余空间。 - Salvatorelab

@BillyMoat 看看下面的代码，我已经添加了你的max-height: 100%；很抱歉告诉你，它没有改变任何东西。http://jsfiddle.net/ytg8S/3/ - Peter

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

- Kingk