DEV Community

Markus Wedler
Markus Wedler

Posted on • Edited on

How to make an element to fill the height of a page

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)