如何讓子 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中文網其他相關文章！