JQuery UI计算对话框内容的大小，以避免对话框中的滚动条

Question

我在JQuery UI对话框中添加了一些内容。 HTML如下：

<div id="dialog">
  <div id="content">

    <div id="scrollable">

      <div id="data">
        <ul>
        <li/>
        <li/>
         ....
       </ul>
      </div>

    </div>

    <div id="footer">
    </div>
  </div>
</div>

JQuery代码就像：

$('#dialog').dialog({
  width : 500,
  height: 300
})

如您所见，对我来说重要的尺寸是主容器的尺寸，对话框。我希望内容在对话框内没有滚动条在对话框中。内容有两部分，数据本身总是有一个垂直滚动条和一个始终可见的页脚（这部分已经是solved） 解决方案应调整内容div的大小。我已经尝试了几个计算，考虑到对话框中的可用高度是：

var height=$('#dialog').height()-$('.ui-dialog-titlebar').height();
var dataHeight = height-$('#footer').height();