修复了可调整大小的jquery ui对话框中的页眉和页脚？

我有一个可调整大小的jQueryUI对话框，我希望其中只有一个div是可滚动的。我认为这在一个固定大小的对话框中是相当容易做到的，但是这个对话框确实需要调整大小。这是我的对话示例

---

我认为这有点不言自明——我希望当用户上下滚动时，“dialogHeader”div中的内容在顶部保持可见，“dialogFooter”中的内容在对话框底部保持可见。

好的，我用一些javascript和一些css解决了这个问题

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog',
    resize: function(event,ui){
        ResizeDialog();
    }
  });

  ResizeDialog();
});

function ResizeDialog(){
  var headerHeight = $('#dialogHeader').height();
  var footerHeight = $('#dialogFooter').height();
  var theadHeight = $('#dialogContent thead').height();
  var dialogHeight = $('#dialog').height();
  $('#dialogContent').height(dialogHeight - (headerHeight + footerHeight) - 25);
}

CSS:

---

使可滚动部分的最大高度为对话框高度和溢出滚动的百分比，您可能需要将其放入容器中。这只需要css，但如果对话框的大小调整过大，它可能会抖动，因为在某些javascript中也应该使用完美的解决方案

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog'
  });
});

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog',
    resize: function(event,ui){
        ResizeDialog();
    }
  });

  ResizeDialog();
});

function ResizeDialog(){
  var headerHeight = $('#dialogHeader').height();
  var footerHeight = $('#dialogFooter').height();
  var theadHeight = $('#dialogContent thead').height();
  var dialogHeight = $('#dialog').height();
  $('#dialogContent').height(dialogHeight - (headerHeight + footerHeight) - 25);
}

#dialogContent{    
  overflow: scroll;
}