Sometimes it's needed for a fullscreen menu, etc. There are 2 ways I know to do so:
100vh
vh stands for "viewport height". To make the element full-screen just add height: 100vh to its CSS. There's also vw that's based on viewport width. The only problem is that vh doesn't mind mobile browsers' search bar and toolbar so sometimes you may encounter a situation when these bars hover some page's elements hiding them.
100dvh
dvg stands for "dynamic viewport height", it does mind mobile browsers' search bar and toolbar and excludes their heights out of viewport's height.
Top comments (0)