使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 網格。