Can someone please explain to me the Nav Bar element’s height calculation on tablet and mobile of “calc(100vh - 50px)”? I’ve searched here on the forum and the documentation but cant find anything. I need to understand what that is doing so I can understand the impact of changing it.
Thanks!
It’s a dynamic calculation performed by the browser: 100% of the viewport height minus 50 pixels.
Instead of hard-coding one or multiple heights in your css rules you simply tell the browser to figure out the final value of pixels.
read more about viewport height: <length> - CSS: Cascading Style Sheets | MDN (you need to scroll a bit to find the definition for vh)
read more about calc: calc() - CSS: Cascading Style Sheets | MDN
I’m from my phone now and can’t check.
A usual reason to use this value is because you have an element at the top of the page with 50px height and you want the element after this to fill the rest of the viewport, so you ask the browser to make it 100% viewport height - 50px.
OK thanks, that makes sense.