0

我在一个 div (MainDiv) 旁边有三个表格，最大宽度：200 像素和最大高度：400 像素，而我的 BodyDiv 具有自动大小和最大高度：300 像素。

我需要（MainDiv）中的X方向滚动和BodyDiv的Y方向滚动。所以从 MainDiv 滚动我可以滚动所有三个表。

但它只显示了三列 BodyDiv 并在 200px 位置放置了一个滚动条。我在 BodyDiv 的末尾需要这个卷轴。

这是我的代码：

代码

<div id="MainDiv" style="max-width:200px;max-height: 400px;overflow-X: auto;overflow-Y: hidden;">
<table style="background-color:Fuchsia;width:100%;">
    <tr >
        <td class="Cell">
            column1
        </td>
        <td class="Cell">
            column2
        </td>
        <td class="Cell">
            column3
        </td>
        <td class="Cell">
            column4
        </td>
        <td class="Cell">
            column5
        </td>
    </tr>
</table>
<div id="BodyDiv" style="max-height: 300px;overflow-Y: visible;overflow-X: hidden;">
    <table style="width:100%;">
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
    </table>
</div>
<table style="background-color:Fuchsia;width:100%;">
    <tr >
        <td class="Cell">
            column1
        </td>
        <td class="Cell">
            column2
        </td>
        <td class="Cell">
            column3
        </td>
        <td class="Cell">
            column4
        </td>
        <td class="Cell">
            column5
        </td>
    </tr>
</table>

4

4 回答 4

1

了解您在哪个浏览器中看到问题会有所帮助。在 Chrome 中对我来说看起来大部分都很好。

将两个 div 设置为 400px 的最大高度，您将超载外部 div 的大小（第一个表的高度 + 中间表的高度 + 最后一个表的高度，当允许中间表扩展时，将始终大于 400px 到400px），因此底部表格将被“推”出外部 div 的可视区域。

于 2013-03-25T08:02:20.270 回答
0

看起来包含 DIV 应该有 overflow-X:hidden; 溢出-Y:auto 不是反过来吗？

您还需要给容器 DIV 增加一点高度以适应所有三个 DIV。

于 2013-03-25T08:08:14.507 回答
0

您将 BodyDiv 指定为 100% 宽度。这将意味着（包括存在时的滚动条）它只会是其父级宽度的 100%（MainDiv 宽度为 200px）。

使 BodyDiv 大于其父级的唯一方法是使用固定宽度值，这也可能会导致一些问题，因为不同浏览器的滚动条宽度略有不同。

于 2013-03-25T09:20:43.667 回答
0

这个问题是通过添加内部div（BodyDiv）标签的固定宽度来解决的。它将滚动条放在 div 的末尾。当我们滚动 Main Div 时，它会滚动所有三个表。

于 2013-03-25T09:24:56.007 回答