如何使带有溢出的内部div：滚动保持在外部div内？

Question

我在另一个div的div内有一个表，如下所示：

<div id="outer">
    <div class="inner">
        <h4>Search results</h4>
        <table>
            <tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
            <tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
            <!-- Lots more data rows -->
        </table>
    </div>
</div>

表格主体是由javascript动态生成的。
外部div的position:fixed 。
内部div具有overflow:scroll ，应始终填充外部div，但切勿超出其边界。

另外：

• 如果外部div的bottom设置为auto ，则内部和外部div都应扩展以适合整个表格；否则， 要么
• 如果外部div的bottom设置为任何固定值（例如“ 10px”），则内部div应该保留在外部。

类似的规则应适用于双方的div的宽度取决于我是否设置外层div right要么auto或固定值。

该计划是，我在外部div上从bottom:auto开始，而javascript生成了表格主体，因此两个div都进行了扩展以适合表格。
然后，在完成表之后，我将外部div的大小与视口大小进行比较。 如果外部div的自动尺寸适合视口，则将其保留为auto ，否则我将设置固定值以使其适合视口，并且用户可以滚动查看表格的其余部分。

当我在javascript中更改的唯一属性位于外部div上时，是否有任何一组CSS规则可以实现这一目标？

我最接近的是在内部div上同时设置height:100%和width:100% 。 唯一的问题是，内部div的滚动条在外部div外面几个像素。

我也尝试过：

• 在内部div上未设置任何尺寸。 这使得它始终与表大小相同，而忽略了外部div的大小； 和
• 设置position:absolute内部div的position:absolute和左/上/右/下均为0。 当外部div的大小为auto时，这两个div的大小都将变为零。

仅使用一个div而不是两个div会更简单，但是使用不同颜色的两个边框可以在为此设计的Web应用程序中提供更好的对比度。

这是一个JSFiddle： http : //jsfiddle.net/jr5R2

Answer 1

需要增加height: 100%外部和内部div均为height: 100%

演示

#outer {
    display: block;
    position: fixed;
    left: 1px;
    top: 40px;
    width: auto;
    right: auto;
    bottom: auto;
    z-index: 1000;
    border: 2px solid silver;
    height: 100%;
}
#outer .inner {
    background-color: white;
    border: 1px solid black;
    padding: 2px;
    overflow-y: scroll;
    height: 100%;     
}