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
})

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

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