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.