為什麼浮動子 Div 的高度有時是 0px，如何修復？

為浮動子div 實作100% 高度

在父div 中使用浮動子div 時，您可能會遇到子div 的情況div 假定高度為0px。這種看似令人費解的行為源自於浮動元素與其父級互動的方式。

在這種特殊情況下，內部 div 設定為向左浮動並指定了 100% 的高度。然而這樣的配置並沒有達到預期的效果。

解決這個問題的關鍵在於修改父div的CSS屬性。透過將 display 屬性設為 flex，您可以強制父 div 表現得像 Flex 容器，使其子元素能夠拉伸到其完整高度。

以下是父 div 修改後的 CSS 程式碼：

#outer {
  display: flex;
}

需要注意的是，較舊的瀏覽器（例如​​ IE9）可能不完全支援 flex 屬性。因此，建議添加供應商前綴以確保不同瀏覽器之間的相容性。另外，考慮使用值為stretch的align-items屬性來確保子div填滿父div的整個高度。

透過套用這些CSS修改，您可以成功地強制內部div呈現其父div高度的100%，實現所需的垂直對齊。

以上是為什麼浮動子 Div 的高度有時是 0px，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！