javascript - 将 Kendo UI 网格高度设置为包装器的 100%

Question

我知道有一种简单的方法可以通过他们的 API 设置 Kendo UI 网格的固定高度，但为了我们的特定需求，我需要使网格扩展到其包装器的全高。

使用以下标记结构，我将 .wrapper 设置为 height:600px 我试着给 .k-grid-content height:100% 但它没有展开。 #grid 使用 height:100% 扩展到 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

根据 Kendo 的技术支持团队之一；迪莫迪莫夫。你应该设置一个容器的高度，里面的所有东西都应该设置为 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;
}