根据可用高度css更改div的高度

Question

这就是我想要的http://jsfiddle.net/QsLMh/9/

HTML：

<div class="container">
<div class="header">
</div>
<div class="filter">
</div>
<div class="body">
    <div class="data">
    </div>
    <div class="data">
    </div>
    <div class="data">
    </div>
    <br style="clear:both">
</div>

CSS：

.container{
  margin:5px;
  height:300px;
  border: 1px solid blue;
  overflow: hidden;
}
.header{
  margin:5px;
  height:100px;
  border: 1px solid green;

}
.filter{
  margin:5px;
  height:100px;
  border: 1px solid red;
}
.body{
  margin:5px;
  border: 1px solid black;
  overflow-y: scroll;
  overflow-x:hidden;
  height:100%;
  max-height: 70px;
}
.data{
  margin: 10px;
  height:50px;
  float:left;
  width:100%;
  border: 1px solid pink;
}

正如您所看到的，如果您单击过滤器div，则主体div不会自动调整大小。我可以使用javascript做到这一点，但我想知道是否可以只使用css吗？