窗口调整大小时的动态剑道网格高度？答案

【问题标题】：Dynamic kendo grid height on window resize?窗口调整大小时的动态剑道网格高度？
【发布时间】：2020-01-15 14:27:08
【问题描述】：

基本上，我有一个带有标题 div 和底部 div 以及介于两者之间的剑道网格的网页。当我调整窗口大小时，我希望网格自动调整其高度，以便组合的三个 div 始终适合窗口高度。

我查找了答案并尝试在函数中计算网格高度并在调整大小时调用它，但它对我不起作用。我还从 Telerik 论坛中读到，要将网格设置为其容器的 100% 高度，容器需要设置一个显式高度，但我不想以像素为单位设置容器 div 高度。

在 2010 年左右查看论坛帖子以解决 2020 年的问题，我感到非常愚蠢。任何帮助将不胜感激，在此先感谢！

【问题讨论】：

Amber，你能分享一些代码 sn-p 可能在 stackblitz 上
你试过他们的建议here吗？我从来没有让它为我工作。

标签： html css kendo-ui

【解决方案1】：

多年来我一直在尝试获得它并放弃了。有一种方法可行，但禁用视图中的滚动（但不在网格上）：视图上的data-stretch="true"。然后你将网格高度和宽度设置为 100% 我认为。

【讨论】：

【解决方案2】：

试试这个：

// Put header div, bottom div or any other element class name in an array except grid.
var elementsClassNames = ["header", "footer"];

// trigger onResize() event on window resize.
@HostListener('window:resize')
onResize() {
    this.elementsHeight = 0;
    this.calculateDynamicHeight(elementsClassNames);
}

// Logic to calculate the dynamic height.
calculateDynamicHeight(classList: any[]) {
    let elementsHeight = 0;
    const docHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    for (let i = 0; i < classList.length; i++) {
        if (document.querySelector(classList[i]) as HTMLElement) {
            elementsHeight += (document.querySelector(classList[i]) as HTMLElement).offsetHeight;
        }
    }
    const kendoGridHeight = (docHeight - elementsHeight); // This will return the dynamic height of the Kendo Grid.
}

【讨论】：