内部的滚动条固定了 100% div，没有 Javascript

Question

好的，所以我在屏幕右侧有一个固定的div，即window的高度。当内容超过div的空间时，我希望div溢出一个scrollbar。

我已经设法在Chrome中执行此操作，但是在Firefox中不起作用。

SSCCE

.HTML：

<div id="outer">
    <div id="middle">
        <div id="inner">
        </div>    
    </div>
</div>

.CSS：

div#outer{
    position    : fixed;
    top         : 0;
    right       : 0;
    display     : table;
    z-index     : 200;
    width       : 320px;
    height      : 100%;
}
div#middle {
    display     : table-cell !important;
    max-width   : 300px;
max-height  : 100%;
}
div#inner {
    overflow-y: auto;
    height: 100%;
}

为什么不起作用？我能做些什么来修复它？

我意识到我可以将事件绑定到窗口大小调整并基于此强制设置div高度，但我更喜欢CSS解决方案。

Answer 1

使容器具有溢出：自动; 绝对。 http://jsfiddle.net/NicoO/49SY8/

body, html
{
    margin:0;
    padding:0;
    height:100%;
}
div#outer{
    position    : fixed;
    top         : 0;
    right       : 0;
    z-index     : 200;
    width       : 320px;
    height      : 100%;
}
div#middle {
    max-width   : 300px;
}
div#inner {
    overflow: auto;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    top:0;
}