How to fit all available height inside element - html

Question

Here's an example on JSFiddle.
Excerpt of code:
<table style="height:100%">
<tr height="20"><td></td></tr>
<tr>
<td>This gray cell fits all available height of table</td>
</tr>
<tr height="20"><td></td></tr>
</table>
There is a table with three rows. Row in the middle fits all available height of table.
I took this solution from here.
Problem is that impossible to make overflow-y for middle cell. It seems that the middle cell has a min-height property equals height of it's content.
So does it possible to turn on scrolling (overflow-y:auto) somehow and if it doesn't how to implement this layout in divs?
UPD. Thanks. Seems like this is working example: http://jsfiddle.net/haGWe/6/
But it's still interesting how to implement this with divs.

Answer 1

Here it is.
Basically, add a div inside your td element, add a fixed height (I chose 20px) and overflow: auto.

Answer 2

Wrap the contents of middle row in a div and apply the css to the div.
<div class="widget">
<table cellpadding="0" cellspacing="0">
<tr class="widget-header">
<td>20 px above</td>
</tr>
<tr class="widget-content">
<td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td>
</tr>
<tr class="widget-footer">
<td>20 px below</td>
</tr>
</table>
</div>
.widget{
position:absolute;
min-width:200px;
width:200px;
outline:1px solid gray;
right:50%;
top:20px;
}
.widget > table{
height:100%;
width:100%;
}
.widget-header{
height:20px;
}
.widget-content{
vertical-align:top;
background:gray;
}
.widget-footer{
height:20px;
}
#myDiv
{
height:40px;
overflow-y:scroll;
}
http://jsfiddle.net/2YvG6/