Scrollable div in table-cell doesn't work

Question

I've got the following HTML code:

<header>
    header
</header>
<nav>
    nav
</nav>
<div class="content">
    <div class="box">
        content<br />
    </div>
</div>

body is displayed as table

header, nav and .content as table-cells.

I would like to make div.content scrollable. Since you can't fix that with a table-cell, I added an extra div to it, and add overflow: auto to it.

The full CSS looks like this:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    display: table;
    table-layout: fixed;
}
header, nav, .content {
    display: table-cell;
    vertical-align: top;
}
header {
    width: 100px;
    background: red;
}
nav {
    width: 100px;
    background: blue;
}
.content {
    background: lightgreen;
}
.box {
    background: lightblue;
    height: 100%;
    overflow: auto;
}

Also check this JSFiddle.

This code seems to work in IE9 and Opera12, but not in Firefox26.

Anyone got an idea what the problem might be?

Answer 1

I have fixed it with a little piece of jQuery code:

<script>
$(window).on("resize", function () {
    $(".box").height( $(window).height()+"px" );
}).resize();
</script>

It gives .box the window height on page load en resize.