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

Question

我有一个可调整大小的 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>

以及对话框代码:

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

我认为这是不言自明的 - 当用户向上或向下滚动时，我希望“dialogHeader”div 中的内容在顶部保持可见，而“dialogFooter”中的内容在对话框底部保持可见.

Answer 1

好吧，我用一些 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:

#dialogContent{    
  overflow: scroll;
}