关于jqueryui手风琴填充空间的问题

我在一个div容器中有一个具有手风琴效果的div，我希望手风琴div装满容器div

因此，我从下载演示中了解到，将fillSpace:true转换为container div，我写道：

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

此外，容器还添加了一些jquery ui类，如“ui小部件ui小部件内容ui帮助程序clearfix ui角点所有”

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

那么我该如何解决这个问题呢

---

谢谢

有几个问题。如前所述，当您调整portlet的大小时，没有正确调整头部的大小。这是因为页眉具有固定的宽度。使用100%宽度，如下所示：

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

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

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

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

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

下面是一个JavaScript解决方案，用于调整portlet内容div的大小：

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

---

如果您只希望在调整大小操作完成后自动调整大小，也可以使用“停止”事件而不是“调整大小”。

有几个问题。如前所述，当您调整portlet的大小时，没有正确调整头部的大小。这是因为页眉具有固定的宽度。使用100%宽度，如下所示：

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

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

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

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

下面是一个JavaScript解决方案，用于调整portlet内容div的大小：

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

---

如果您只希望在调整大小操作完成时自动调整大小，也可以使用“停止”事件而不是“调整大小”。

e……可能您还没有理解我的意思……调整容器大小时，accordion div无法适配到外部容器，不是标题问题……也许你没有理解我的意思……当容器调整大小时，accordion div无法与外部容器适配，不是标题问题谢谢你解决了我的问题。实际上在我的实际项目中，标题大小正确，只是为了简单，让你更好地理解，所以我剪切了很多html代码：）谢谢你解决了我的问题。事实上，在我的实际项目中，标题的大小是适当的，只是为了简单，为了让你更好地理解它，所以我剪切了很多html代码：）