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都应扩展以适合整个表格;或
如果外部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的大小;和
在内部div上将position:absolute和左/上/右/下全部设置为0。这使得当div的外部大小为auto时，两个div都会变为零大小。

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

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

Answer 1

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

DEMO

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

如何使溢出内部div：滚动留在外部div？

1 个答案:

DEMO