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