jquery UI 手风琴填充空间的问题

Question

我在div容器中有一个具有手风琴效果的div，我想要手风琴div填充容器div

所以我从下载演示中学习使fillSpace：true，到容器div，我写：

.resizable({
       resize: function () {
       $(".accordion").accordion("resize");
});

容器还添加一些 jquery ui 类，例如 "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"

但当我拖动并调整容器大小时，问题发生了，无论变长还是变短，内部的手风琴都只会变长，

那么如何解决这个问题呢？ 这是网上案例

谢谢

Answer 1

有几个问题。正如已经提到的，当您调整 portlet 的大小时，标题的大小不会正确调整。这是因为标题的宽度是固定的。使用 100% 宽度，如下所示：

.portlet-header{ width:100%; height:25px;position:relative; }

主要问题是，当您调整大小时，portlet-content div 的大小不会调整，而只会调整主 portlet 的大小。因此，当您要求手风琴调整大小时，容器实际上并没有变大。您需要使 portlet-content 填充 portlet div。如果这样做：

.portlet-content { overflow:auto; height: 100%; }

内容 div 高度将等于门户 div 高度，这是不正确的（因为它不会考虑标题的大小）。

以下是 JavaScript 中调整 portlet-content div 大小的解决方案：

$(".portlet").resizable({
    resize: function () {
        var height = $(".portlet").height() - $(".portlet-header").height();
        $(".portlet-content").height( height );
        $(".accordion").accordion("resize");
    }
});

如果您只想在调整大小操作完成时自动调整大小，则还可以使用“stop”事件而不是“resize”。

Answer 2

.portlet-header{ width:100%; height:25px;position:relative; }