Angularjs 在md选项卡中使用ag网格

我使用了ag grid，并且遵循了让页面的父div定义一个显式高度的规则，这样我就可以在网格上设置一个最大高度，允许滚动，而不是无限地增加高度。所以，我有这样的想法：

<div ng-controller="MyController as myCtrl" style="box-sizing: border-box; padding-top: 5px; width: 100%; height: 90%">

...
   <div ag-grid="myGridOptions" class="ag-blue" style="width: 100%; height: 55%"></div>

...

这很好，百分比的行为与您预期的一样

现在，我想使用角材质md选项卡设置一些选项卡。当我将ag网格放在选项卡中时，我设置的高度值似乎不够高。我假设它使用md选项卡或md选项卡的高度，但是，我不确定如何/是否可以显式设置选项卡的高度。我已经尝试过使用“style”属性，但似乎没有效果

我假设我需要强制制表符或制表符容器保持一定的高度，但我不确定如何做到这一点

<div ng-cloak>
    <md-tabs md-border-bottom >
        <md-tab label="Tab1" >
            <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

---

您可以尝试在

文件：

Setting

md dynamic height

有效果，但网格不能有固定的高度%，而是按需要增长，然后md选项卡的高度也会增长。它不允许我在滚动时将网格设置为固定的%高度。如果我在md选项卡上设置md动态高度，然后将ag网格高度设置为px中的固定高度，而不是%。我认为这是正确的，因为使用md dynamic height让我找到了解决方案，但我很好奇您是否有其他建议，您可以尝试FlexBox，或

vh

而不是

px

。但更灵活的方法是编写类似于

setHeight

指令的内容，在该指令中，您将计算mdtab内容的高度

<div ng-cloak>
<md-tabs md-border-bottom md-dynamic-height >
    <md-tab label="Tab1" >
        <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>