So I'm setting up a page with a bunch of dynamic content. I'm organizing this within a table. There are three rows, each with a single cell. The top part works as a fixed header, since I've set the top cell's height. The bottom cell works as a footer, since it also has a static height. The table's total height is set to 100% and the middle row/cell is left to be filled with dynamic content and the remaining space in the table. Here is a two-rowed example to demonstrate the problem:
<html>
<body>
<div class="element_container", style="width: 600px; height: 500px;">
<div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
</div>
</div>
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
</div>
</div>
</div>
</div>
</body>
</html>
In chrome/ff/safari, the total height of the table is kept at 500px. In IE8, it becomes 540px, as if the 100% height from second cell are inherited from the table itself, and not it's parent row.
Is there anyway to get tables to work the same way across browsers? Or, at the very least, obtain the same sort of functionality within tables in IE8?