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

【问题标题】：The problem about the of jquery UI accordion fill spacejquery UI手风琴填充空间的问题
【发布时间】：2010-12-11 08:40:43
【问题描述】：

我在 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"

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

那么我该如何解决这个问题呢？ here is the online case

谢谢

【问题讨论】：

标签： jquery user-interface accordion

【解决方案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");
    }
});

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

【讨论】：

感谢您解决了我的问题。实际上在我的实际项目中，标题大小合适，这里只是为了简单，让您更好地理解它，所以我剪掉了很多html代码:)跨度>

【解决方案2】：

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

【讨论】：

e……也许你没有明白我的意思……当容器调整大小时，手风琴的 div 不能适应外部容器，而不是标题问题