Resize to Match Parent Element's Height

heightStyle = fill

Menu 1

To programmatically change heightStyle after initial setup:
$("selector").accordion("option", "heightStyle", "desiredHeightStyle").accordion( "refresh" );

"refresh" updates the menu to reflect any header or panel changes, and it updates the height of the panels.

Menu 2

This menu's panels are resized to match the height of its parent element (the wrapper that contains it, shown by the white border).

Code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css"/>
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

        <script type="text/javascript">
            // $(function() { code }); executes the contained code when the DOM is finished loading
    	    $(function()
            {
                $("#example").accordion( // Call the accordion method on the element with the id example
                {
                    heightStyle: "fill" // Use available height based on parent element's height
                });
            });
            
    	    $(function() // This part is only here to show how heightStyle: "fill" effects the panels
            {
                $("#resizable").resizable( // Call the resizable method on the #resizable id element
                {
                    minHeight: 200, // Set a mniimum resizable height
                    minWidth: 400, // Set a minimum resizable width
                    maxWidth: 975, // Set a maximum resizable width
                    resize: function() // Set up the resize event
                    {
                        // Call the refresh method of the accordion method to update the panels' heights
                        $("#example").accordion("refresh");
                    }
                });
            });
        </script>
    </head>

    <body>
        <div id="resizable"> // This div is here to allow resizing of the menu for illustrative purposes
            <div id="example">
                <h3>Menu 1</h3>
                <p>This is some placeholder content in a p element.</p>
                <h3>Menu 2</h3>
                <p>This is more placeholder content in a second p element.
                    It is coded directly below an h element which jQuery's
                    accordion method turns into the header you see above this content.
                </p>
                <h3>Code</h3>
                <pre> *** This is what you are viewing *** </pre>
            </div>
        </div>
    </body>
</html>