Question

以下代码块基本上在正常设置中处理load和resize事件，但是使用我们正在使用的前端框架（Kendo UI），当首次加载页面时，目标div高度不是set属性。

var resizeGrid = function() {
    var viewportHeight = $(window).height();
    var search = $("#something").outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
    resizeGrid();
});

$(document).ready(function () {
    $(window).trigger("resize");
});

我在这里有一个使用Kendo UI复制相同设置的演示。

JS BIN

当浏览器屏幕高度时，您会注意到网格高度会动态变化更改但不是首次加载页面时。我应该怎么做这个？

Answer 1

这是因为在页面加载后kendoGrid ajax请求完成。您需要将此添加到kendoGrid dataBound方法，以便在加载内容后调整网格大小。

dataBound: function(e) {
  resizeGrid();
},

请参阅jsBin http://jsbin.com/jatotojo/8/edit

基于视口高度的负载动态div高度（Kendo UI）

1 个答案: