拉伸子 div 以匹配父级高度
当您遇到上述情况时，子 div 的高度应匹配父级的高度，但父级的高度未知，可以通过flexbox找到解决方案。
实现垂直缩放子div、父元素需要如下样式：
display: flex;
此外，您应该添加浏览器前缀以确保跨浏览器兼容性。
align-items:stretch;财产也至关重要。但是，由于它是 Flex 框中的align-items 的默认值，因此除非您打算使用不同的值，否则不需要显式设置它。
Flexbox 的align-items 属性影响子元素，而不是子元素它所应用到的元素。要定义子元素的拉伸，可以使用align-self属性。
考虑以下示例：
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>在此示例中，other-child div 单独存在目的是拉伸父母的身高。结果，子 div 将占据父级可调整高度的 100%。
以上是如何让子 Div 拉伸到高度未知的父 Div 高度？的详细内容。更多信息请关注PHP中文网其他相关文章！
