html - 对话框内 div 的滚动问题

Question

我在 jQuery 对话框中创建了一个 div，我希望这个 div 有一个垂直滚动条。由于某种原因，内容不会滚动。它一直在继续。

这是 HTML 代码:

<input type="button" value="open" id="btnOpen">
<div id="myDialog">
    <div style="width: 350px; display: inline-table; overflow-y: scroll; height: 200px; margin-right: 50px;" id="divAvailableHosts">
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    test<br />test<br />
    </div>
</div>

我还创建了 a fiddle演示问题。

Answer 1

检查这个fiddle .

你只需从样式中删除 display:inline-table

<div style="width: 350px;overflow-y: scroll; height: 200px; margin-right: 50px;" id="divAvailableHosts">