Исправлен заголовок и нижний колонтитул в изменяющемся диалоге 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; 
}