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

Sergei Mazhuga @mazhugasergei

About: A web developer with a passion for creating visually stunning and intuitive websites

Location:
Vladivostok
Joined:
Aug 7, 2022

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

Publish Date: Aug 17 '22
0 0

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.

Comments 0 total

    Add comment