使用 ag-Grid 自动调整卡片内容的大小（实现 css）

Question

在materialize css 框架的卡片标签元素中，我正在尝试设置ag-grid 表。

这里是代码。

        <div class="card-tabs">
          <ul class="tabs tabs-fixed-width">
            <li class="tab"><a href="#test4">Test 4</a></li>
            <li class="tab"><a href="#test5">Test 5</a></li>
          </ul>
        </div>

        <div class="card-content  grey lighten-5">

          <div id="test4" style="height: 200px;">

            <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>

          </div>

          <div id="test5">Test 5 content</div>
        </div>

       </div>

问题是我无法使用id='test4' 自动调整元素的高度以使网格可见。如果我从中删除 style="height:200px;"，则网格不会显示。如果我添加它会显示，但我不想将其静态保留在 200px 上，因为网格的高度可能会发生变化。

有没有办法让id='test4'的div根据ag-grid的大小自动调整大小？

我尝试将height:auto; 放在card-content 和test4 div 中，但没有任何成功。

Answer 1

如果没有内容，则不会显示 Div。你为什么不把空白的&nbsp值放在html里面。

    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">Test 4</a></li>
        <li class="tab"><a href="#test5">Test 5</a></li>
      </ul>
    </div>

    <div class="card-content  grey lighten-5">

      <div id="test4"

        <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
       &nbsp;
      </div>

      <div id="test5">Test 5 content</div>
    </div>

   </div>