The problem about the of jquery UI accordion fill space

I have a div with accordion effect in a div container,I want the accordion div fill full of the container div

So I learn from the download demo make the fillSpace: true,to the container div,I write:

.resizable({
       resize: function () {
       $(".accordion").accordion(开发者_如何转开发"resize");
});

as well the container add some jquery ui class like "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"

but the problem happened,when I drag and resize the container,no matter the longer or the shorter,the inner accordion only become longer,

So how can I solve this problem? here is the online case

Thank you

---

There are a couple of problems. As already mentioned, the header is not resized properly when you resize the portlet. This is because the header has a fixed width. Use 100% width as follows:

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

The main problem is that when you are resizing, the portlet-content div is not resized, only the main portlet one. So, when you ask the accordion to resize the container isn't really any larger. You need to make the portlet-content fill the portlet div. If you do this:

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

The content div height will be equal to the portal div height, which is not correct (as it would not take into account the size of the header).

Here is a solution in JavaScript that resizes the portlet-content div:

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

You could also use the "stop" event rather than "resize" if you only want the auto-size to occur when the resize operation is complete.

---

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