Question

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

我在堆栈溢出上看了这个问题：

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

然后我尝试将此应用于角度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

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

看看这个Stackblitz demo

具体来说，您需要设置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 或全局样式中的任何内容。< /p>

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

制作ag-grid的方法采用角度为5/6的100％页面高度

2 个答案: