動態單位dvh, svh, lvh

我知道我孤陋寡聞，這東西都出來多久了，現在才在追，沒錯，要不是瀏覽器遇到奇怪的問題，我大概一被子也不會碰到這東西，原本以為傳統vh, %已經夠用了，沒想到有推出這麼好用的東西，廢話不多說，直接開始

1. svh (Small Viewport Height)

• 含義：小視窗高度。

• 定義：當瀏覽器的 工具列完全顯示（展開狀態）時，所剩餘的可視區域高度。

• 特性：它是三者中最小的高度。

• 場景：當你希望元件在任何情況下都不會被工具列遮擋時使用。

2. lvh (Large Viewport Height)

• 含義：大視窗高度。

• 定義：當瀏覽器的 工具列完全隱藏（收起狀態）時，所能達到的最大可視區域高度。

• 特性：它的數值與傳統的 100vh 基本一致，但在某些裝置上更穩定。

• 場景：當你追求極致的全螢幕視覺效果，且不介意底部內容暫時被工具列覆蓋時使用。

3. dvh (Dynamic Viewport Height)

• 含義：動態視窗高度。

• 定義：根據 工具列目前的顯示狀態自動調整 的高度。

• 特性：當工具列縮小時，100dvh 會變大；當工具列展開時，它會縮小。

• 場景：這是目前最推薦的單位，適合用來製作「真正的全螢幕」滿版背景或中間定位的彈窗（Modal），它能確保元件始終在當前的畫面中央。

---

快速對比表

單位	全寫	工具列狀態	高度大小	適用情況
svh	Small Viewport Height	展開 (Max UI)	最小	確保內容不被遮擋
lvh	Large Viewport Height	隱藏 (Min UI)	最大	追求最大視覺空間
dvh	Dynamic Viewport Height	自動變動	隨動	最推薦，自動適應當前畫面

那100dvh跟100%差別在哪呢，主要就是不會受到父元素影響吧，上圖表

特性	height: 100%	height: 100dvh
參照對象	父元素 的高度。	視窗 (Viewport) 的動態高度。
依賴性	必須「層層向上」定義高度。	獨立存在，不論父元素高度為何。
動態縮放	隨父元素變動。	隨瀏覽器工具列（網址列）縮放變動。
預設行為	若父元素沒設高度，此設定無效。	即使放在深層結構，也能直接抓到螢幕高度。

所以傳統做法需要先定意html, body的高度，讓container可以做到高度100%
html, body, .container {

    height: 100%;

}
之後就不用這麼麻煩了，直接
.container {

    height: 100dvh;

}
搞定收工，歡呼聲!