CSS vertical Table Layout - css

Question

I have a table made of divs like this:
<div class="table">
<div class="tRow A">
<div class="tCell">
Test
</div>
</div>
<div class="tRow B">
<div class="tCell">
<!-- content here -->
</div>
</div>
<div class="tRow C">
<div class="tCell">
Test
</div>
</div>
</div>
with the following css:
body, html{
height: 100%;
}
.table{
display: table;
height: 100%;
max-height: 100%;
width: 200px;
table-layout: fixed;
}
.tRow{
display: table-row;
}
.tCell{
display: table-cell;
}
.B {
background: yellow;
}
.B .tCell{
overflow: hidden;
}
.C{
height: 50px;
background: green;
}
http://jsfiddle.net/HtA43/
Now what i need (and i am not able to get this working) is, that the table is rendered 100% height. rowA getting as high as its contents rowC with a fixed height at the bottom. And rowB should fill the rest of the space.
This works so far, but when the content of rowB exceeds its size, the cell and thus the table grows. What i need is that rowB does not grow but the overflow is hidden.
Any suggestions?

Answer 1

On your requisits you have overflow:hidden that makes the layout more easy to acomplish. You can have an structure like this:
<div class="container">
<div class="A">
Test
</div>
<div class="B">
Test....
</div>
<div class="C">
Test
</div>
</div>
And then just a few styles:
.container{
height: 100%;
width: 200px;
position:relative;
overflow:hidden;
}
.B {
min-height:100%;
}
.C{
position:absolute;
bottom:0;
width:100%;
height: 50px;
}
Check this Demo Fiddle