vh 與 % 的差異

1. vh（Viewport Height）

定義：vh 是視窗高度（Viewport Height）的百分比，1 vh 等於視窗高度的 1%。

參考基準：視窗的高度（不受父元素影響）。

應用場景：用於根據視窗大小動態調整高度，常用於全螢幕佈局或視口自適應設計。

• 示例

如果視窗高度是 1000px，則：

100vh = 1000px
50vh = 500px

• 特點：

當視窗大小變化時（例如縮小或放大瀏覽器），vh 的值會自動調整。

與父元素的大小無關，完全依賴視窗尺寸。

2. %（百分比）

定義：% 是元素尺寸相對於父元素尺寸的比例。

參考基準：父元素的高度或寬度。

應用場景：適用於需要根據父容器的大小調整元素尺寸的情況。

示例

如果父元素高度是 600px，則：

100% = 600px
50% = 300px

• 特點：

元素的高度或寬度是相對於父元素而定的。

如果父元素沒有明確設定高度，則子元素的高度百分比可能無法生效。

75VH 與容器高度

子容器的的上層的祖先輩都需要設置 100% ，才抓的到 最外層容器的 75vh

为了让子元素的高度能够相对于父容器的 75vh 来计算，父容器和所有上层祖先元素需要设置 height: 100%，直到最外层容器（根容器）设置了具体的高度（例如 75vh）。

• 当你为最外层容器设置了一个固定的高度（比如 75vh），它的高度只有在父容器和所有祖先容器设置了 height: 100% 时，才能正确地传递给子容器。

• 如果父容器的高度没有设置明确的值（或者没有设置 100%），子元素无法正确地继承父元素的高度，从而无法基于 75vh 来计算自己的高度。