如何使内部 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 但永远不要超出其边界。

此外：

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

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

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

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

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

我也试过：

• 不在内部 div 上设置任何尺寸。这使得它总是与表格大小一致，忽略外部 div 的大小；和
• 设置position:absolute和左/上/右/底部都为0，在内部DIV。当外部 div 的大小为 时，这会使两个 div 的大小都为零auto。

这会更简单，只有一个 div 而不是两个，但是两个不同颜色的边框在设计的 Web 应用程序中提供更好的对比度。

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

Answer 1

需要添加height: 100%到外部和内部div

演示

#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%;     
}