Datagrid：如何填充卡块内的可用空间

Question

我们创建了可以调整大小并由用户移动的卡片。在其中一些卡中，我们想要嵌入一个应该填充的数据网格。可用空间（例如卡块）。

我可以控制宽度，但还没有找到控制场景高度的方法。在这里，数据网格在我的卡外面增长，甚至压低了卡片页脚。

Here is a StackBlitz example显示行为。

顺便说一句，trick with "height: 100%"似乎在我的情景中无效。

任何帮助都将不胜感激。

Answer 1

将高度设置为百分比似乎并不将其限制为卡块本身，但设置为绝对像素是正确的。

我在你的Stackblitz中看到你试图将高度设置为300px，但这仍然超出了托管元素的大小。卡本身设置为400px x 400px，但一旦渲染，卡块（放置数据网格的位置）仅为398px x 281px。

请查看此Stackblitz，其中我将datagrid的高度设置为240px。

Answer 2

正如我的评论中所提到的，要使用height: 100%，您需要父级具有已定义的高度。除了你的情况，它都是动态的，直到卡本身，所以你必须将height: 100%向下传播到数据网格。我用这个更新了你的plunker，现在工作正常：https://stackblitz.com/edit/fit-datagrid-in-card

有关身高的说明，请参阅https://drafts.csswg.org/css2/visudet.html#propdef-height：

  

＆LT;百分比＆GT;

     

指定百分比高度。百分比是根据生成的包含块的高度计算的。 如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则计算使用的高度，如同＆＃39;汽车＆＃39;已指定。根元素的百分比高度相对于初始包含块。