I was very happy about viewport units and was using them a lot to get full width, full height elements on screen until recently, I came across strange bug – setting element height to 100vh works like magic on desktop/laptop screens, but fails miserably on mobile for one simple reason – they take into consideration the browser address bar which is visible initially and hides when scrolling down.
JS based soultion
At first I found a javascript based workaround using a CSS variable --myCssVar set to 1% of window.innerHeight and calculating element height via:
height: calc(var(-- myCssVar, 1vh) * 100)
This solution isn’t perfect – it also needs a screen resize handler to update window.innerHeight value and you probably want to use some sort of debounce function for that also. It works on moderns browsers only, which means IE <=11 are left behind, because they don’t support css variables.
CSS only solution
The simple CSS only solution is to have your CSS height property defined from the root html, body elements all the way to the target element, that you want to be full height. In my case I needed to make a full height modal, so I set:
html, body {
height: 100%;
}
The easiest way is to have your full screen element as immediate child of <body> element because setting it to 100% it will inherit the height from parent container, which in our case would be a body tag. If you element lies in a deeper level – you’ll need to make sure every element on your way to the target has height property defined.