如何使浮動 Div 達到其父級高度的 100%？

在父級內實現浮動div 的100% 高度

當嘗試將浮動div 設定為其父級的100% 高度時，您可以遇到內部div 以0px 高度渲染的挑戰。此行為歸因於 HTML 元素的預設垂直對齊方式。若要解決此問題，您必須配置父級 div 的顯示屬性以啟用垂直對齊。

解：

強制內部 div符合父級的高度，修改CSS如下：

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

附加註意事項：

• 前綴： 增加適當的CSS供應商前綴以實現跨瀏覽器相容性非常重要。
• Internet Explorer： 由於對Flexbox 的支援有限，Internet Explorer 9 及更早版本可能無法顯示版面配置
• 對齊方式： 預設情況下，父元素的align-items屬性設定為“stretch”，這意味著子元素（包括內部div）將垂直對齊和拉伸來填充可用空間。如果您的子div需要不同的對齊方式，可以使用align-self屬性。

實例：

點擊以下連結查看實例JSFiddle 示範：https://jsfiddle.net/bv71tms5/2/

以上是如何使浮動 Div 達到其父級高度的 100%？的詳細內容。更多資訊請關注PHP中文網其他相關文章！