我正在尝试将SlickGrid 与jQuery Layout UI 一起使用，并且我希望 SlickGrid 占据其父窗格的 100% 高度。
问题是，当 SlickGrid 被实例化时，它没有行（我的 ajax 接口的一部分稍后加载到数据中，而不是在页面加载时），所以默认情况下将高度设置为 1px（加上标题）。当我稍后加载数据时，我看不到任何行。
我已尝试将 SlickGrid DOM 元素设置为 height: 100%;，但这无济于事。如何强制 SlickGrid 画布占据其所在窗格的 100% 高度，即使它的数据行数较少？
【问题讨论】：
我最终通过结合使用jQuery PubSub、UI Layout 的访问器方法和SlickGrid 的resizeCanvas() 方法来解决这个问题。它似乎工作得很好。
注意：我的项目已经在使用 pubsub，我使用 RequireJS 加载我的模块。
因此，在我的网格模块文件中，我订阅了一个方法来接收它所在窗格的新 innerHeight，它将它保存到一个局部变量中，然后调用我的 resize(); 函数：
$.subscribe("units/set_grid_height", function (new_height) {
grid_opts.height = new_height;
resize();
});
// ...
// grid = the jQuery element that represents the SlickGrid
// slick = the instantiated slickgrid
function resize() {
grid.css('height', grid_opts.height);
slick.resizeCanvas();
}
然后，在我的 init js 文件（其中定义了布局）中，我为初始状态和每次中心窗格更改时设置了正确的发布：
layout = $('body').layout({
center: {
onresize: function (name, el, state, opts, layout_name) {
$.publish("units/set_grid_height", [state.innerHeight]);
}
}
});
$.publish("units/set_grid_height", [layout.state.center.innerHeight]);
这似乎正是我想要的。我知道这不是一个通用的解决方案，但看起来 SlickGrid 无法独自完成所有这些工作。
【讨论】：
对于像我这样遇到类似错误但情况不同的人：
来自wiki-“标记中需要slickgrid容器上的显式宽度和高度，否则网格体不可见（高度：1px）并且网格获取网格标题的宽度（宽度： 100000 像素）。”
所以不要忘记给主网格 div 一个宽度和一个高度！
ps：这里不认为它适用于这个问题，但这是搜索“slick grid 1px bug”时出现的唯一问题：-/
【讨论】：
我将给出一个即使我不喜欢的答案，但我的 javascript 技能有限，这是我一直在使用的解决方案，直到我找到更好的解决方案。
基本上，我采用文档高度并减去 slickgrid 之外的任何其他元素的高度，如下所示：
$("#id-of-slickgrid-container").height(
$(document).height() -
$("#header").outerHeight() -
$("#nav").outerHeight() -
$("#footer").outerHeight() - 44
);
“44”是一个捏造的数字，它足够接近 slickgrid 等内部使用的额外空间的高度。
【讨论】：
我希望这个答案仍然有用，我在另一个答案中遇到了它：https://stackoverflow.com/a/10878955/4606828
在 Slickgrid 选项中添加 autoHeight:
options = {
...
autoHeight: true
};
Slickgrid 将始终随着它的内容而增长，您可以将父级的高度设置为任意值。
【讨论】：
我接受了范的答案并调整如下。还是有magic numbers，但至少你不用知道具体的容器。
HTML：
<div id="myGridSizer"></div>
<div id="myGrid"></div>
CSS：
#myGrid {
width: 100%;
}
#myGridSizer {
top: 73px;
bottom: 73px;
width: 0;
position: absolute;
}
JavaScript：
$("#myGrid").height($('#myGridSizer').outerHeight());
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options);
【讨论】：