html - 自动调整卡片内容的大小(实现 css)，其中包含一个 ag-Grid

Question

在 materialize css 框架的 card-tabs 元素中，我正在尝试设置一个 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如果没有内容则不会显示。你为什么不把空白   值放在 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>