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：这里应该有滚动条

编辑3：结果应如下所示

Answer 1

良好礼仪答案

问题可能出在<div>层次结构上。因为当您在另一个<div>内有<div>时，需要将第一个relative设置为<div>，并且需要将absolute的序列集设置为<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> 位置。

HTML

HTML将保持不变。

.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;
}

CSS

你应该用CSS：

trainList

这样它应该有用。

Answer 2

一个简单的答案

您只需将overflow: auto;更改为overflow: hidden;属性：

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

.pgrau {
    background-color: #ccc;
}

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

overflow属性指定如果元素的内容超出元素框的大小，该怎么办。

Answer 3

Box Re-size问题解答

对于第二个问题，您需要在height: auto;字段中使用.panelcontent：

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

.pgrau {
    background-color: #ccc;
}

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

overflow的选项是：

overflow: visible | hidden | scroll | auto | inherit

正如您在CSS溢出属性的描述中看到的那样：

http://www.w3schools.com/cssref/pr_pos_overflow.asp

我建议你也看一下这个链接：

https://css-tricks.com/almanac/properties/o/overflow/