HTML – 如何在Firefox和IE中使这个100％高度列溢出布局工作？

我有一个三列布局,占用浏览器的100％宽度和高度(带填充).此布局包含两列,它们也占据100％的高度,并且应该独立滚动.

这是一个jsfiddle：http://jsfiddle.net/KdZ9A/2/.以下是它在Chrome中的外观(可取 – 单个列滚动)：

和Firefox和IE(不受欢迎 – 正在滚动)：

这在Chrome中完美运行;但是,在Firefox和IE(10)中,整个页面滚动而不是单个列滚动.我只希望列溢出并滚动 – 而不是正文.任何想法如何在Firefox和IE中使这项工作？

我还尝试了使用列内容的绝对定位的一种不同的方法：http://jsfiddle.net/KdZ9A/3/.

这是我正在使用的HTML：

<div id="container">
    <div id="inner">
        <div id="palette">palette</div>
        <div id="list">
            <div class="content"></div>
        </div>
        <div id="editor">
            <div class="content"></div>
        </div>
    </div>
</div>

我使用绝对定位来达到100％的高度,然后在里面显示表格和表格单元格,以达到100％的高度：

* {
    padding: 0;
    margin: 0;
}

html,body {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
}

#container {
    BACkground-color: #f1f1f1;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
}

#inner {
    display: table;
    height: 100%;
}

#inner > div {
    display: table-cell;
}

#palette {
    min-width: 180px;
    max-width: 180px;
    width: 180px !important;
    BACkground-color: pink;
}

#list {
    width: 55%;
    min-width: 350px;
    BACkground-color: cyan;
}

#editor {
    width: 45%;
    min-width: 400px;
    BACkground-color: magenta;
}

.content {
    overflow: auto;
    height: 100%;
}

<div class="content-wrap">
    <div class="content">
        ...
    </div>
</div>

.content-wrap {
    position: relative;
    height: 100%;
}

.content {
    overflow: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}