在 md-tab 中使用 ag-grid答案

【问题标题】：Using an ag-grid inside an md-tab在 md-tab 中使用 ag-grid
【发布时间】：2017-09-16 00:31:09
【问题描述】：

我使用了 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>

这很好用，并且百分比的行为符合您的预期。

我现在想使用 Angular 材质 md-tabs 设置一些标签。当我将我的 ag-grid 放在选项卡中时，我设置的高度值似乎不够高。我假设它使用 md-tab 或 md-tabs 的高度，但是，我不确定如何/是否可以显式设置选项卡的高度。我已经尝试使用“样式”属性这样做，但它似乎没有效果。

我假设我需要强制选项卡或选项卡容器达到一定高度，但我不确定如何执行此操作。

<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>

【问题讨论】：

标签： angularjs layout tabs ag-grid

【解决方案1】：

您可以尝试在<md-tabs> 处添加md-dynamic-height

文档：https://material.angularjs.org/latest/api/directive/mdTabs

<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>

【讨论】：

设置md-dynamic-height有效果，但是网格不能有固定的高度%，而是增长到需要的高度，然后md-tabs的高度也会增长。它不允许我通过滚动使网格具有固定的 % 高度。
如果我在 md-tabs 上设置 md-dynamic-height，然后将 ag-grid 高度设置为以 px 为单位的固定高度，而不是 %。我会将此标记为正确，因为使用 md-dynamic-height 让我找到了解决方案，但我很好奇您是否有其他建议
你可以试试 flexbox，或者vh 而不是px。但更灵活的方法是编写类似 setHeight 指令的内容，您将在其中计算 mdtab 内容的高度