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)