在对话框内滚动问题与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

使div的高度小于内容。

Answer 2

检查此fiddle。

您只需从

这样的样式中删除display:inline-table即可

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