Height issue?

There seems to be some kind of height issue.

by dwaddell

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.css">
<div id="Select_Dialog">
    <div id="Select_Display">
        <div id="Select_List" class="ui-corner-all ui-widget-content">
            <div id="Select_ScrollContainer">
                <div id="Select_ScrollContent" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                     <h3 class="ui-accordion-header ui-helper-reset ui-corner-all ui-accordion-icons ui-state-active ui-state-focus" role="tab" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-check"></span><a tabindex="-1" href="#"><div selectedindex="0" class="Select_Element"><div>Hello</div><div>Goodbye</div></div></a></h3>

                     <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-close"></span><a tabindex="-1" href="#"><div selectedindex="1" class="Select_Element"><div>Hello</div><div>Goodbye</div></div></a></h3>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#Select_ScrollContainer {
    overflow : auto;
    height : 450px;
}
#Select_List {
    padding: 0.5em;
}
body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 10px;
}

JavaScript

$(document).ready(function () {
    var nHeight = $('#Select_ScrollContent').height();
    $('#Select_ScrollContainer').height(nHeight + 1); // Add one for rounding errors
});