html - 具有可滚动列的完整窗口布局仅在Firefox中不起作用-怎么了？

我正在尝试使用左侧的可滚动内容窗格和浮动面板创建全窗口布局。我从CSS表格开始，对Chrome和IE11的结果感到非常满意。问题是：它完全不能在Firefox中使用。我错过了什么？

我的页面结构如下：

<div class="column-container">
    <div class="column" style="width: 200px;">1st column</div>
    <div class="column" style="position: relative; overflow: auto;">
        <div style="position: absolute; top: 0px; width: 100%;">
            ... (lot's of rows)
        </div>
    </div>
</div>

和二手样式：

body {
  position: absolute;
  top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.column-container {
  display: table;
  width: 100%;
  height: 100%;
}

.column {
  display: table-cell;
  height: 100%;
}

这是带有更多颜色的小提琴：http://jsfiddle.net/GWsLJ/3/

最佳答案

我不知道在Firefox中您的代码是怎么回事。我能够使此fiddle正常工作。最后，我简化了您的HTML，并将所有样式移至CSS。它适用于所有主要浏览器。

HTML：

<div class="column-container">
    <div class="sidebar">lol</div>
    <div class="absolute-div">
        <!--content-->
    </div>
</div>

CSS：

* {
    margin:0;
    padding:0;
}
body {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: yellow;
    margin: 0px;
}
.column-container {
    display: table;
    height: 100%;
    width: 100%;
    background-color: black;
}
.sidebar {
    display: table-cell;
    height: 100%;
    background-color: blue;
    position: fixed;
    top:0;
    left:0;
    width: 200px;
}
.absolute-div {
    display: table-cell;
    position:absolute;
    top:0;
    left:200px;
    background-color: gray;
    width: 100%;
}

关于html - 具有可滚动列的完整窗口布局仅在Firefox中不起作用-怎么了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20127462/