Jquery accordion height:100%

jQuery( "#accordion" ).accordion({
   collapsible: true,
   heightStyle: "content"
});

It will work and if your are using some combo or widget whose size increases after selection or due to any action the size of the accordion increases than by handling that event you can simply call the following;

jQuery( "#accordion" ).accordion( "resize" );

to adjust your accordion.

You can do this with jQuery UI Accordion (demo):

css

html, body  {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.accordion {
    height: 100%;
}

script

$(function(){

    $( ".accordion" ).accordion({ fillSpace: true });

    $(window).resize(function(){
        // update accordion height
        $( ".accordion" ).accordion( "resize" )
    });

});

---

For newer versions of jQuery UI Accordion (v1.12.1+), set the heightStyle to fill, use "refresh" to update and set the html & body height to 100% (demo).

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

Script

$(".accordion").accordion({
  heightStyle: "fill"
});

$(window).resize(function() {
  // update accordion height
  $(".accordion").accordion("refresh");
});

I use 1.8.21 of jquery-ui, and heightStyle: "content" didn't work for me. I read through the code and I found the following solution:

    $('.accordion').accordion({
        "autoHeight": false,
    });