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

I have a resizable jquery-ui dialog and I'd like for only one div in it to be scrollable. I think this would be fairly easy to do in a fixed size dialog, but this one really needs to be resizable. Here's a sample of my dialog

我有一个可调整大小的jquery-ui对话框，我想只有一个div可以滚动。我认为在固定大小的对话框中这很容易做到，但这个确实需要调整大小。这是我的对话框示例

http://jsfiddle.net/gurduloo/eLejtx7q/

<div id="dialog">
<div id="dialogHeader">
    <span>Header Content</span><br/>
    <input type='radio' value='1' name='options' checked='checked' />Option 1
    <input type='radio' value='2' name='options' />Option 2
</div>
<div id="dialogContent">
    <table>
        <thead>
            <tr><th>Column 1</th><th>Column 2</th></tr>
        </thead>
        <tbody>
            <tr><td>Data Item</td><td>Data Item</td></tr>                
            <tr><td>Data Item</td><td>Data Item</td></tr>
        </tbody>
    </table>
</div>
<div id="dialogFooter">
    <span>Footer Content</span>
</div>    
</div>

And the dialog code:

对话框代码：

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

I think it's kind of self explanatory - I want the stuff in the "dialogHeader" div to remain visible at the top and the stuff in "dialogFooter" to remain visible at the bottom of the dialog when the user scrolls up or down.

我认为这有点自我解释 - 我希望“dialogHeader”div中的内容在顶部保持可见，“dialogFooter”中的内容在用户向上或向下滚动时在对话框底部保持可见。

1 个解决方案

#1

Ok, I worked it out with some javascript and a little css

好的，我用一些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：

#dialogContent{    
  overflow: scroll;
}

#1