剑道网格中锁定和解锁列的高度不匹配答案

【问题标题】：Height of locked and unlocked columns not match in Kendo Grid剑道网格中锁定和解锁列的高度不匹配
【发布时间】：2015-01-12 11:11:42
【问题描述】：

我有一个锁定列的 Kendo UI Grid，它具有动态宽度和高度。 Grid 的容器正在 CSS 中调整大小，我正在使用 kendo.resize($("#grid")) 来适应 Grid 并且一切正常。

我还有一个在调整列宽的窗口调整大小事件上触发的函数。如果可能，列应该占据整个网格而不显示底部滚动条，但它们也有最小高度。所以我计算列宽并将其设置为它们，但是当我在未锁定的列容器中有水平滚动条时，锁定的容器与它不匹配。

如果有水平滚动条，通常锁定的列在底部显示白色区域，但是当我明确设置列宽时它不会。

我在这个小提琴中重现了我的问题（它比我描述的要简单一点，但想法是一样的）：http://dojo.telerik.com/ADaqe

当我打开它时，网格应该看起来不错，但是当您减小右侧 iframe 的宽度并显示水平滚动条时 - 未显示白色区域，只需尝试将网格滚动到底部，看看会发生什么：@987654322 @ 任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

有私有网格功能._adjustLockedHorizontalScrollBar() 正是我需要的：

$(window).on('resize', function () {
    that._adjustLockedHorizontalScrollBar();
    ...
});

【讨论】：

【解决方案2】：

如果您只想使用 CSS 来解决此问题，将 padding-bottom: 100% 添加到锁定列内的表格对我有用。

.k-grid-content-locked {
   height: 100% !important; // overrides inline style

   table {
     padding-bottom: 100%;
   }
}

在 Chrome 75.0.3770.100、IE 11.76517134.0、Android 8 和 iOS 12.2 中测试

希望对你有帮助

【讨论】：

谢谢！ .k-grid-content-locked { height: 100% !important; } 在我的情况下就足够了。添加填充破坏了我的布局。
这会在网格垂直滚动时破坏布局。锁定的列变得比表格大。