為什麼我的子 DIV 不繼承其浮動父級的 100% 高度？

在浮動父級中強制子DIV 的高度為100%

在提供的HTML 和CSS 中，儘管付出了努力，內部DIV 的高度仍保持在0px將其聲明為父級的100%

解決方案：

要解決此問題，父DIV「outer」需要「display: flex」屬性來啟用Flexbox 功能：

#outer {
  display: flex;
}

Flexbox 引入了對靈活佈局的支持，允許內部DIV（「內部」）垂直擴展並佔據其整個高度

其他注意事項：

1. 瀏覽器相容性： Flexbox受到現代瀏覽器的廣泛支持，但可能會引起與舊版的兼容性問題Internet Explorer（例如IE9）。使用前綴來確保跨各種瀏覽器的兼容性。
2. 對齊項目與對齊自身：「align-items」是父級的一個屬性，用於確定其子級的垂直對齊方式。它的預設值為“stretch”，垂直拉伸所有子項目以填充可用高度。如果子 DIV 需要不同的對齊方式，請使用「align-self」屬性。
3. JS Fiddle 範例： 造訪 https://jsfiddle.net/bv71tms5/2/請參閱建議解決方案的工作範例。

以上是為什麼我的子 DIV 不繼承其浮動父級的 100% 高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！