height

👥 相關

• VStack/HStack

Second Tab

set height explicitly

Avoid explicitly setting the height of an element to avoid overflow issues.

• Specifying a % height is problematic.

• % refers to the parent's size.

• parent's height is typically determined by the height of its children. This produces a circular definition that the browser can’t resolve, so it’ll ignore the declaration.

height: 100%

• For percentage-based heights to work, the parent must have an explicitly defined height. 🗣 Why doesn't height: 100% working?

• 如果都是用 %，則一路從 html ⟩ body ⟩ .... ⟩ 到自己的直屬母物件都要明確設定 %，否則只要中間有一層斷掉也是沒用。

height: 100%

/*
   當我們設定 height: 100% 時，此設定並不會真正發生作用，
   除非它的母物件有「明確設定」height。
   ⭐️ 注意：設定母物件的 min-height 並沒有幫助❗️
 */
i-vstack:only-child {
    height: 100%;
}

🗣 討論

• 🗣 Why doesn't height: 100% working?