理解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一樣。畫面下方可能會滿溢。

直接看參考文章

vh 存在问题？试试动态视口单位之 dvh、svh、lvh - ChokCoco - 博客园www.cnblogs.com

vh,dvh,svh,lvh

Use these instead of vh

Use these instead of vh

(EOF)