Datagrid：如何在卡片块中填充可用 space
Datagrid: how to fill available space inside card-block
我们已经创建了可以由用户调整大小和移动的卡片。在其中一些卡片中，我们想要嵌入一个 Datagrid，它应该 "fill" 可用 space（例如卡片块）。
我可以控制宽度，但在我的场景中还没有找到控制高度的方法。在这里，Datagrid 超出了我的卡片，甚至压低了卡片页脚。
Here is a StackBlitz example 显示行为。
顺便说一句， 在我的场景中似乎不起作用。
如有任何帮助，我们将不胜感激。
您是正确的，将高度设置为百分比似乎并没有将其限制为 card-block 本身，但设置为绝对像素确实如此。
我在您的 Stackblitz 中看到您试图将高度设置为 300 像素，但这仍然超出了托管元素的大小。卡片本身设置为 400px x 400px，但渲染后，card-block（放置数据网格的位置）仅为 398px x 281px。
请看一下这个Stackblitz，我将数据网格的高度设置为 240px。
正如我在评论中提到的，要使用 height: 100%，您需要父项具有定义的高度。除了你的情况，它都是动态的，直到卡本身，所以你必须将 height: 100% 向下传播到数据网格。我用这个更新了你的 plunker，现在它工作正常：https://stackblitz.com/edit/fit-datagrid-in-card
身高解释见https://drafts.csswg.org/css2/visudet.html#propdef-height:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.
我们已经创建了可以由用户调整大小和移动的卡片。在其中一些卡片中，我们想要嵌入一个 Datagrid，它应该 "fill" 可用 space（例如卡片块）。
我可以控制宽度，但在我的场景中还没有找到控制高度的方法。在这里，Datagrid 超出了我的卡片，甚至压低了卡片页脚。
Here is a StackBlitz example 显示行为。
顺便说一句，
如有任何帮助，我们将不胜感激。
您是正确的，将高度设置为百分比似乎并没有将其限制为 card-block 本身，但设置为绝对像素确实如此。
我在您的 Stackblitz 中看到您试图将高度设置为 300 像素，但这仍然超出了托管元素的大小。卡片本身设置为 400px x 400px，但渲染后，card-block（放置数据网格的位置）仅为 398px x 281px。
请看一下这个Stackblitz，我将数据网格的高度设置为 240px。
正如我在评论中提到的，要使用 height: 100%，您需要父项具有定义的高度。除了你的情况，它都是动态的，直到卡本身，所以你必须将 height: 100% 向下传播到数据网格。我用这个更新了你的 plunker，现在它工作正常：https://stackblitz.com/edit/fit-datagrid-in-card
身高解释见https://drafts.csswg.org/css2/visudet.html#propdef-height:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.