jQuery UI Resizable with overflow-y

Question

我有一个可调整大小的 div，但现在我遇到了 y 滚动条的问题。问题是这个滚动条不是必需的，因为所有内容都是可见的。

图片

HTML

<script>$( "#pc_test" ).resizable({handles: \'n, s\'});</script>
<div id="panel_test">
    <div class="panelheadbar pgrau">Test</div>
    <div id="pc_test" class="panelcontent ui-resizable" style="font-size: 14px;">
    Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
    </div>
</div>

CSS

.panelheadbar { padding: 5px; font-weight: bold; color: #000; height: auto; }
.pgrau { background-color: #ccc; }
.panelcontent { overflow-y: auto; overflow-x: hidden;padding: 10px; background-color: #FFF; border: 1px solid #ccc; }

我该如何解决这个问题，即在需要时只有一个滚动条？

编辑:如果用户将滚动条调整得太多，我想要一个滚动条。

编辑 2:这里应该有一个滚动条

Edit3:结果应该是这样的

Answer 1

礼貌回答

问题可能出在 <div> 上等级制度。因为当你有一个 <div>在另一个里面，第一个<div>需要设置为 relative和 <div> 的序列集需要设置为absolute位置。

HTML

HTML 将保持原样。

<script>$( "#pc_test" ).resizable({handles: \'n, s\'});</script>
<div id="panel_test">
    <div class="panelheadbar pgrau">Test</div>
    <div id="pc_test" class="panelcontent ui-resizable" style="font-size: 14px;">
    Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
    </div>
</div>

CSS

你应该在 CSS 上使用这种方式:

.panelheadbar {
    position: relative;
    overflow: hidden;
    padding: 5px;
    font-weight: bold;
    color: #000;
    height: auto;
}

.pgrau {
    background-color: #ccc;
}

.panelcontent {
    position: absolute;
    overflow: hidden;
    overflow-x: hidden;
    padding: 10px;
    background-color: #FFF;
    border: 1px solid #ccc;
}

这样它应该可以工作。