Html 为什么身高=100%不起作用？

我使用的第三方组件占用了所有可用空间，即宽度=100%，高度=100%。我无法控制它

我试图将其安装在以下布局中，但其高度=100%不起作用。我希望第三方组件占据所有绿地

为什么?？你将如何解决这个问题

.集装箱{ 显示器：flex； 弯曲方向：立柱； 宽度：200px； 高度：100px； } .标题{ 显示器：flex； 背景色：rgba255,0,0,0.5； } .内容{ 柔性生长：1； 背景色：rgba0，255，0，0.5； } .第三方组成部分{ 身高：100%； 宽度：100%； 背景色：rgba0，0，255，0.5； } 标题 第三方组件

---

您只需在.content元素中使用另一个flex容器：

.集装箱{ 显示器：flex； 弯曲方向：立柱； 宽度：200px； 高度：100px； } .标题{ 显示器：flex； 背景色：rgba255,0,0,0.5； } .内容{ 柔性生长：1； 显示器：flex； 弯曲方向：立柱； 背景色：rgba0，255，0，0.5； } .第三方组成部分{ 柔性生长：1； 身高：100%； 宽度：100%； 背景色：rgba0，0，255，0.5； } 标题 第三方组件 因为.content没有height=0px，.third partment有100%的0px。您可以将属性高度：calc 100%添加到.content中 .集装箱{ 显示器：flex； 弯曲方向：立柱； 宽度：200px； 高度：100px； } .标题{ 显示器：flex； 背景色：rgba255,0,0,0.5； } .内容{ 高度：calc100%-18px； 柔性生长：1； 背景色：rgba0，255，0，0.5； } .第三方组成部分{ 身高：100%； 宽度：100%； 背景色：rgba0，0，255，0.5； } 标题 第三方组件

---

通常，对于使用“高度百分比”拾取其父元素高度的图元，父元素需要一个值，否则高度将计算为“自动”

基于这两个选项，正如您在评论中提到的，您自己的标题在高度上是动态的，留给您的是绝对位置

将绝对值添加到内容中的问题是，它将从流中移除，并停止作为正常的流flex项的行为，好消息是，可以将包装器集添加到绝对值

堆栈片段

.集装箱{ 显示器：flex； 弯曲方向：立柱； 宽度：200px； 高度：100px； } .标题{ 显示器：flex； 背景色：rgba255,0,0,0.5； } .内容{ 位置：相对；/*已添加*/ 柔性生长：1； 背景色：rgba0，255，0，0.5； } .包装纸{ 位置：绝对；/*已添加*/ 左：0；/*已添加*/ 顶部：0；/*已添加*/ 右：0；/*已添加*/ 底部：0；/*已添加*/ } .第三方组成部分{ 身高：100%； 宽度：100%； 背景色：rgba0，0，255，0.5； } 标题 第三方组件

---

请注意，您不能修改第三方组件，因此向其添加flex grow:1不算作解决方案。定义css选择器和规则不会修改组件。你总是可以这样做的。如果您不想按class.content>div作为目标，可以使用嵌套选择器，如果这对您有影响，可以使用其他变体。我感谢您的回答，但这个问题的关键是如何使用第三方组件而不弄乱其样式。因为.content没有height-height=0px，而.third-partment有100%的0px。您可以将属性高度：calc 100%-添加到.content中。问题是标题的高度是动态/未知的。例如：.header的高度是20%，您必须将.content的高度设置为80%，或者如果未设置.header的高度，我觉得你们应该使用JS来获取.header的高度，然后设置.content的属性高度。我看到你们被投票否决了，而不是被我否决了，因为有人没有告诉我为什么，我会的。高度=0px和组件具有100%0px的声明都是错误的。检查我的答案它是如何工作的。代码片段按预期工作。。。。