首頁  >  文章  >  web前端  >  為什麼百分比高度在 Flexbox 欄位中無法如預期運作?

為什麼百分比高度在 Flexbox 欄位中無法如預期運作?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-09 00:06:02315瀏覽

Why Doesn't Percentage Height Work as Expected in Flexbox Columns?

Flexbox 欄位中的百分比高度問題

在 Flexbox 版面中,通常希望 Flexbox 欄位的子項填入其高度。然而,使用者可能會遇到將高度設為百分比卻無法得到預期結果的問題。

說明

根據 Flexbox 規範,元素的跨尺寸屬性(在本例中為高度)使用指定值和使用值。百分比高度是根據父項的指定高度計算的,而不是根據使用的高度。

解決方案

要在 Chrome 中解決此問題:

  1. 設定父容器(.flex)顯示:flex。
  2. 移除高度: 100%;來自子元素 (.flex-child) 的規則。

範例:

.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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn