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