如何让kendo网格在JQuery UI对话框中填充页眉和页脚之间100%的高度？

Question

我有一个jquery UI对话框,它必须在打开后动态设置其高度和宽度.这包含标题div,kendo网格和页脚div.我想做的是使kendo网格滚动而不是对话框; 对话框实际上必须是溢出:由于其他原因而隐藏.换句话说,我需要kendo网格(内容)来填充页脚和页眉之间的100%空间.我也在使用淘汰赛,淘汰赛.

<div id="popup">
    <div id="header">
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
    </div>
    <div data-bind="kendoGrid: items"> </div>
    <div id="footer">
        <p><a href="#">CLOSE</a></p>
    </div>
</div>

JSFIDDLE:http://jsfiddle.net/pbkBd/2/

我尝试使用此示例来设置内容高度,但无法使其与我的方案一起使用:http://jsfiddle.net/dimodi/MjKmJ/

Answer 1

您可以像这样设置网格内容高度,

 $(".k-grid-content").height('200');

http://jsfiddle.net/jayanthakgjls/pbkBd/4/

你可以计算高度并resize在窗口中的事件中设置它,

 resize: function() {
    // user has finished resizing the window
      var height=<calculate Height>
     $(".k-grid-content").height(height);
 }