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

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

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

2 个答案: