我们创建了可以由用户调整大小和移动的卡片。在其中一些卡片中，我们想要嵌入一个应该“填充”可用空间（例如卡片块）的数据网格。
我能够控制宽度，但在我的场景中还没有找到控制高度的方法。在这里，Datagrid 在我的卡片之外增长，甚至压低了卡片页脚。
这是一个显示行为的 StackBlitz 示例。
顺便说一句，“高度：100%”的技巧在我的场景中似乎不起作用。
任何帮助，将不胜感激。
问问题
510 次
2 回答
0
您是正确的，将高度设置为百分比似乎不会将其限制为卡块本身，但设置为绝对像素却可以。
我在您的 Stackblitz 中看到您尝试将高度设置为 300 像素，但这仍然超出了托管元素的大小。卡片本身设置为 400px x 400px，但是一旦渲染，卡片块（放置数据网格的地方）只有 398px x 281px。
请看一下这个Stackblitz，我将数据网格的高度设置为 240 像素。
于 2018-03-11T13:58:34.610 回答
0
正如我的评论中提到的，要使用height: 100%你需要父母有一个定义的高度。除了在您的情况下，这一切都取决于卡本身，因此您必须将其传播height: 100%到数据网格。我用这个更新了你的 plunker，现在它工作正常：https ://stackblitz.com/edit/fit-datagrid-in-card
有关高度说明，请参见https ://drafts.csswg.org/css2/visudet.html#propdef-height：
<百分比>
指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则使用的高度计算为好像指定了'auto'。根元素上的百分比高度是相对于初始包含块的。
于 2018-03-14T13:34:37.080 回答