使ag-grid以角度为100％页面高度的方法

Question

我正在尝试使角度ag-grid占据网页的全高，所以如果我有一些组件，如ag-grid文本或标题，我想让显示的网格占据页面的全高。

我看过关于堆栈溢出的这个问题：

如何让我的 flexbox 布局占据 100% 的垂直空间？

然后我尝试将其应用于角度ag-grid网格

这是我应用的 css，但它没有给出想要的结果：

body, html {
  height: 100%;
  margin:2px;
}

my-app .container {
  display: flex;
  flex-direction: column;
}


my-app .container .ag-grid-angular {
  flex-basis: 100%;
  display: flex;
  flex-grow: 1;
}

这是 Stackblitz 的演示链接：

https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css

我已经使用类.container用 div 包围了网格，以便能够应用display: flex CSS，但这没有帮助。 有没有办法让网格的高度占据页面的整个高度？

如果我删除内联样式：

style="width: 100%; height: 600px"

对于ag-grid-angular ，我只能看到其中的一行。

Answer 1

删除模板中ag-grid-angular内联样式后，您需要对styles.css进行一些更改。

看看这个Stackblitz 演示

具体来说，您需要制作ag-grid-angular元素（不仅仅是类）及其父容器的高度。

my-app, my-app .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ag-grid-angular{
  height: 100%;
}

Answer 2

对于遇到此问题的任何人，在 ag grid 23 + 和 Angular 9+ 中，重要的是父容器的高度将被正确设置，无需设置ag-grid-angular或全局样式中的任何内容。

对我来说，问题是我在没有 100% 的 mat tab 组中使用了 ag 网格。