如何在可變高度父元素中達到 100% 子元素高度？

在不同的父級中實現100% 的子高度

在多列佈局中，確保導航列與主要內容垂直對齊至關重要。但是，如果不指定父元素的高度，這可能會很有挑戰性。

解：

在父元素上使用 flex 來顯示屬性。這允許子級垂直彎曲和擴展，佔據父級的高度。

.parent {
  display: flex;
}

其他屬性：

• align-items：stretch;將子元素設定為在父元素內垂直拉伸。
• flex-direction: column;垂直對齊子元素（預設值）。

範例：

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

注意：

• 注意：

跨瀏覽器相容性的前綴是推薦。 確保父元素具有一定的高度對於正確的垂直對齊至關重要。

以上是如何在可變高度父元素中達到 100% 子元素高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！