如何让子 Div 拉伸到高度未知的父 Div 高度？

拉伸子 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中文网其他相关文章！