理解CSS單位: vh,dvh,lvh,svh
結論
總之,改用 dvh
取代vh
。
100vh
就是實體螢幕高度。
100dvh
(viewport)會動態考慮 browser 本身帶出的上方 toolbar 與下方 command bar。
因為dvh
(dynamic viewport)還沒有全部 browser 都支援,所以實務上兩個一起上
.container {
min-height: 100vh;
min-height: 100dvh;
}
100svh
(small viewport) 直接扣除 toolbar 與 command 高度。畫面下方可能會留白。
100lvh
(large viewport) 不扣除 toolbar 與 command 高度。故跟100vh
一樣。畫面下方可能會滿溢。
直接看參考文章
Use these instead of vh
(EOF)
Last updated