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

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和test4div中，但没有任何成功。

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>