AngularJS和ui-grid：如何调整网格高度以填充剩余空间

Question

我有这个包含随机数行的ui-grid，但可以肯定的是，它包含大量的列。

那就是说，我有一个与响应相关的问题：我希望网格在宽度和高度上填充页面的剩余空间。

除了外观推理之外，这背后的逻辑是，在大屏幕设备上，允许用户查看尽可能多的列并将ui网格高度扩展到底部，即使在那里显示几行（顺便说一句，页面没有页脚）。

所以，使用媒体查询，我将width: 100%设置为网格并设法完成第一部分技巧，但我正在努力争取第二部分：高度。

我无法真正使gridWrapper高度将网格扩展到底部，即使他的宽度行为正确，也不使用Bootstrap但是...... css struggle是真实的。

所以我设法接近我想要的东西，但是：

• 这是一个狡猾的复杂，微弱和不可重用的解决方案;
• 行选择图标布局（行左侧的那个）随着行号的增长而变得混乱，我现在无法摆脱选择功能;
• 网格的高度大于页面的高度。我可以将它设置为90％而不是100％，以使其工作......关闭，但仍无响应。

即使这个场景是项目GitHub上many issues的主题，我也会问你：

  

在我深入研究由display: table;，display: flex;＆amp ;;组成的沼泽之前，有没有办法以响应式，可能是引导式的方式获得我想要的东西？有限公司。？

Answer 1

给网格高度：在css中自动或者一旦网格准备就绪，我的意思是在你之后将数组分配给gridOptions.data之后

$(".ui-grid").css("height", "auto");

Answer 2

我很害怕只有这样才能实现这个目的是使用JS并以编程方式设置css高度和宽度。

您必须在以下时间进行设置：

• 网格已创建

• 窗口大小更改