css - 如何使剑道网格在 JQuery UI 对话框中填充页眉和页脚之间的 100% 高度？

Question

我有一个 jQuery UI 对话框，它必须在打开后动态设置其高度和宽度。这包含页眉 div、Kendo-grid 和页脚 div。我想做的是制作剑道网格滚动而不是对话框；由于其他原因，对话框实际上必须溢出:隐藏。换句话说，我需要剑道网格(内容)来填充页脚和页眉之间 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);
}