使 ag-grid 在 angular 中占据 100% 页面高度的方法

Question

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

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

How can I make my flexbox layout take 100% vertical space?

然后我尝试将其应用于 angular 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;
}

这是 link 到 Stackblitz 的演示：

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

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

如果我删除内联样式：

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

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

Answer 1

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

看看这个Stackblitz demo

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

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 选项卡组中使用 ag 网格。

使 ag-grid 在 angular 中占据 100% 页面高度的方法

Way to make ag-grid take 100% page height in angular

css

angular

height

ag-grid