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);
}

Answer 2

我使用以下样式强制网格填充：

.fillContainerGrid 
{
    height: 100%;
    width: 100%;
}
.fillContainerGrid > .k-grid-content {
    position: absolute;
    top: 69px;
    bottom: 0;
    left: 0;
    right: 0;
}
.fillContainerGrid> .k-pager-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}