设置Kendo UI网格高度100%的包装器

Question

我知道有一种简单的方法可以通过API设置Kendo UI网格的固定高度,但是为了满足我们的特定需求,我需要让网格在其包装器的整个高度上展开.

使用以下标记结构,我设置.wrapper为height:600px 和我试图给予.k-grid-content height:100%但它不会扩展. #grid扩展到100%height:100%但我需要扩展内部内容.我如何实现这一目标？

这是演示JS BIN

<div class="wrapper">
    <div id="grid">
        <div class="k-grid-header"></div>
        <div class="k-grid-content"></div>
        <div class="k-grid-pager"></div>
    </div>
</div>

Answer 1

根据剑道的技术支持团队之一; 迪莫迪莫夫.您应该设置一个容器的高度,内部的所有内容都应设置为100%(包括网格).然后手动调整文档就绪和窗口大小调整的内容高度.

在这里看他的例子:

http://jsfiddle.net/dimodi/SDFsz/

请参阅此处为您的更新,使用js函数将包装器的高度设置为窗口高度.

http://jsbin.com/yumexugo/1/edit

基本上,内容的大小调整为:

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

并且包装器的大小(您可能需要修改它以适合您的布局):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

文档就绪和窗口调整大小调用:

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

相关的CSS:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}