使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

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

如果我删除内联样式：

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

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

Answer 1

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

看看这个Stackblitz 演示

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

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

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