Html 使div height为容器div的最大高度

我有一个容器

，它有一个

max height

属性。此

包含另一个

，我希望子

增长到其容器的最大高度

<div id='parent'>
  <div id='child'>
  </div>
</div>

当父级

具有固定高度时，这非常容易，但我无法找到使子级

假定容器的最大高度的解决方案。没有填充、边距或任何需要担心的东西-我只需要孩子承担父母的最大高度

---

如何执行此操作？

将父级的显示属性设置为

flex

，并将flex方向设置为列：

#父级{
显示器：flex；
弯曲方向：立柱；
最大高度：100px；
底部边框：2px实心红色；/**示例-显示对父对象的效果**/
}
#孩子{
高度：100vh；
背景：蓝色；
}

---

将父级的显示属性设置为

flex

，并将flex方向设置为列：

#父级{
显示器：flex；
弯曲方向：立柱；
最大高度：100px；
底部边框：2px实心红色；/**示例-显示对父对象的效果**/
}
#孩子{
高度：100vh；
背景：蓝色；
}

需要注意的事情很少，

1.高度应为
vh
以实现响应，在处理高度CSS时效果更好
2。最好使用
vh
作为高度单位


.parent{
最大高度：25vh；
宽度：15vw；
背景颜色：海蓝宝石；
}
.孩子{
背景颜色：棕色；
高度：25vh；
}

引导示例
需要注意的事情很少，

1.高度应为
vh
以实现响应，在处理高度CSS时效果更好
2。最好使用
vh
作为高度单位


.parent{
最大高度：25vh；
宽度：15vw；
背景颜色：海蓝宝石；
}
.孩子{
背景颜色：棕色；
高度：25vh；
}

引导示例
修复起来非常简单，只需在父div中添加一个高度即可

<div class="parent">
  <div class="child"></div>
</div>

这非常容易修复，只需为父div添加一个高度

<div class="parent">
  <div class="child"></div>
</div>

为了澄清你的解释，你的意思是说如果你的父母身高是154px，那么你的孩子的身高也应该是154px吗？不完全是-我的意思是说如果父母的最大身高是154px，那么孩子的身高也应该是154px。我已经发布了答案，如果有任何建议，请放心。仅将孩子的身高设置为100%就足以使用父母的身高。为了澄清您的解释，您的意思是说如果您的父母身高为154px，那么您的孩子身高也应该为154px？不完全是-我的意思是说，如果父母的最大身高为154px，那么孩子的身高也应该是154 px。我已经发布了答案，欢迎任何建议只需将孩子的身高设置为100%就足以让它使用家长的身高。这似乎是可行的，因为孩子的div的高度大于max height，但flex container以某种方式剪裁了高度而不会溢出。奇怪的行为，但谢谢你。@Owen不奇怪，但合乎逻辑：似乎很有效，因为子div的高度大于max height，但flex容器以某种方式剪裁了高度，而没有溢出。奇怪的行为，但谢谢。@Owen不奇怪，但合乎逻辑：谢谢-但我事先不知道父容器的最大高度，所以这不像将子容器的高度值同步到容器的最大高度那么简单。谢谢-但我事先不知道父容器的最大高度，因此，这并不像将孩子的高度值同步到容器的最大高度那么简单。