Fullscreen Modal – Solution for the 100vh issue on Mobile Web Browser

Viewport units in CSS are great, if you want to style an element to take up the full screen height – just set height: 100vh. Sadly, the 100vh unite breaks your design on mobile browsers that makes it nearly useless. When in a mobile browser (Chrome + Safari) the address bar is visible, the bottom of the screen gets cut off since mobile browsers incorrectly set 100vh to be the height of the screen without the address bar showing. A Better Solution: use height 100% instead of 100vh. In this sample project you will learn how to set this up!