CSS vertical table table

Question

I have a table consisting of divs:

<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 cannot get this work) is that the table is rendered at 100% height. rowAgets a value rowCwith a fixed height below. And rowBshould fill the rest of the space.

This still works, but when the content rowBexceeds its size, the cell and therefore the table grow. I need something that rowBdoes not grow, but the overflow is hidden.

Any suggestions?

Answer 1

overflow:hidden, . :

<div class="container">
 <div class="A">
        Test
 </div>
 <div class="B">
     Test....
 </div>
 <div class="C">
        Test
 </div>
</div>

:

.container{
  height: 100%;
  width: 200px;
  position:relative;
  overflow:hidden;
}
.B {
  min-height:100%;
}
.C{
  position:absolute;
  bottom:0;
  width:100%;
  height: 50px;
}

-