让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/

我在这里的问题是，我有div容器，多数民众赞成在高度300像素，然后我有未知高度的头部多数民众赞成（取决于它上面的项目数量和屏幕大小，它可能不止一行）。我如何让.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; 
}