css - 表格单元格中的可滚动 div 不起作用

Question

我有以下 HTML 代码:

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

body 显示为table

header、nav 和 .content 作为表格单元格。

我想让 div.content 可以滚动。因为你不能用表格单元格来解决这个问题，所以我向它添加了一个额外的 div，并向它添加了 overflow: auto。

完整的 CSS 如下所示:

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;
}

同时检查这个 JSFiddle .

这段代码似乎在 IE9 和 Opera12 中有效，但在 Firefox26 中无效。

有人知道问题出在哪里吗？

Answer 1

我已经用一小段 jQuery 代码修复了它:

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

它在页面加载和调整大小时为 .box 提供窗口高度。