Flexbox 欄位中的百分比高度問題
在 Flexbox 版面中,通常希望 Flexbox 欄位的子項填入其高度。然而,使用者可能會遇到將高度設為百分比卻無法得到預期結果的問題。
說明
根據 Flexbox 規範,元素的跨尺寸屬性(在本例中為高度)使用指定值和使用值。百分比高度是根據父項的指定高度計算的,而不是根據使用的高度。
解決方案
要在 Chrome 中解決此問題:
範例:
.flexbox { position: absolute; background: black; width: 100%; height: 100%; display: flex; flex-direction: column; } .flex { background: blue; flex: 1; display: flex; /* Added */ } .flex-child { background: red; width: 100%; /* Removed height: 100%; */ display: block; }
部分填充的替代方法
如果只需要部分填充的替代方法
.flex-child { flex: 9; } .spacer { flex: 1; }
如果只需要填充的一部分,則需要一個額外的Flex 子容器可以新增(.spacer) 來佔用剩餘空間。
結論
透過了解指定值和使用值之間的差異,開發人員可以克服百分比Flexbox 列的高度問題。儘管在某些情況下可能需要特定於瀏覽器的解決方法,但預計規範更新將在未來解決這些限制。以上是為什麼百分比高度在 Flexbox 欄位中無法如預期運作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!