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。

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

1 个答案: