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

我有一个jQueryUI对话框，它必须在打开后动态设置高度和宽度。这包含页眉div、剑道网格和页脚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：

---

我曾尝试使用此示例设置内容高度，但未能将其用于我的场景：

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

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

您可以计算高度并在窗口的

resize

事件中进行设置

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

resize:function（）{
//用户已完成调整窗口大小
变量高度=
$（“.k-grid-content”）。高度（height）；
}

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

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

---

贾扬塔-高度必须是动态的。对话框高度是动态设置的，因此网格内容高度也必须动态设置。理想情况下，这将只是纯css。是的，但您可以在设置对话框高度时使用一些动态值调用它。