我在div（MainDiv）旁边有三张桌子，最大宽度：200px，最大高度：400px 我的BodyDiv有自动尺寸和最大高度：300px。
我需要在（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>
答案 0 :(得分：1)
了解您遇到问题的浏览器会有所帮助。在Chrome中我看起来很好。
将两个div设置为最大高度为400px时，您将超载外部div的大小（当允许中间表时，第一个表的高度+中间表的高度+最后一个表的高度将始终大于400px扩展到400px），所以底部表将被“推”出外部div的可视区域。
答案 1 :(得分：0)
看起来包含DIV应该有溢出-X：隐藏;溢出-Y：自动不是反过来？
你还需要给容器DIV增加一点高度以适应里面的所有三个DIV。
答案 2 :(得分：0)
您将BodyDiv指定为100％宽度。这意味着（包括存在时的滚动条）它只会是其父级宽度的100％（MainDiv宽度为200px）。
使BodyDiv大于其父级的唯一方法是使用固定宽度值，这也可能会导致一些问题，因为不同的浏览器的滚动条宽度略有不同。
答案 3 :(得分：0)
通过添加固定宽度的内部div（BodyDiv）标记来解决此问题。 它将滚动条放在div的末尾。 当我们滚动Main Div时，它会滚动所有三个表格。