CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox

CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox

This works for Chrome: http://jsfiddle.net/EtNgv/ I want to make it work
in IE and Firefox.
Answers to other similar questions said that it is not possible - but did
not mention that it was possible in Chrome - so I am hoping that someone
could tweak what I have here to make it work in FireFox and IE10.
Desired outcome:
A container div that takes up 100% height - but no more. Which wraps
header and footer divs whose heights are determined by their content. The
footer div is always flush with the bottom of the page. A middle div which
stretches between the header and footer. If its content overflows it
should scroll.
Image: http://i.stack.imgur.com/e7ddc.png
Current implementation:
CSS:
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML:
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
This works in Chrome, but in IE and Firefox if the content is larger than
the middle div the container becomes larger than 100% high and the page
obtains a scroll bar.