Quick Note - I might be saying custom properties and variables in css, it means the same thing, i am just interchanging them.

Overview

We all know how viewport units where a real life saver in css, they made writting responsive code with css much easier without having to use so much media queries, but along the line, there where some issues discovered about them. For instance, browsers don't actually calulate 100vw(viewport width) as the total width of the device screen we are on, so a solution to this was to use max-width: 100% in our css so that if a browser doesn't correctly calculate the 100vw, the width will not exceed more than 100% of the user's screen. Also with the viewport height, the browser might not properly calculate the total height of the user's device which can cause some issues while scrolling, this problem is not so obvious on laptop and desktop screens but if you where to use a mobile phone, it would be obvious. When you scroll on a mobile phone, you might see a sudden jump or change to the height and it really throws off the flow of the website. So in order to solve this easily, we can use css & javascript to always ensure that the correct height for the user's device is being used. here is what it looks like:-

CSS

selector {
   height: calc(var(--vh, 1vh) * 100);
   height: 100vh; /* fallback for browsers that don't support custom properties */
}

JS

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);

Let me explain how this works so that you can understand what is going on

STEP 1

We set the height for our selector(which can be anything really) in the css and the height uses the calc() method to dynamically set the value for the height, so whenever there is a value for the css variable(--vh), multiply it by 100 and if that variable does not exist, use the 1vh instead. So the var method uses two values

var(variableName, fallback value)

If the variable cannot be found, it uses the fallback value by default. It is also important to add another height that is set to 100vh because of browsers that don't support css custom properties. Okay now to STEP 2

STEP 2

For the JS code, a variable(vh) is created and it takes a hundredth(1/100) of the height of the users screen, the innerHeight property on the Window object gives us the total height of the current viewport. We then use the documentElement property on the document object(the documentElement is the html element) to change the style by setting the value of the --vh custom property in our css to the value of the vh variable in the JS. You would notice that the value of the vh variable in our javascript code is set to "px" so that the browser can correctly render the height of the users device screen.

Let me use an Iphone 7 screen as an example

Say we are viewing a website on an iphone 7 screen that is 667vh in height. From the explanation, our vh variable in the JS code is going to be "6.67", so the value of the css --vh variable will be 6.67px but remember in our css, we are multiplying that value by 100, so what we actually have is a height of 667px(6.67px * 100), which is what the browser can correctly render.

I hope this was helpful and you were able to learn something, this helped me as i was building my portfolio and it is a really cool trick i actually saw on stackoverflow that i wanted to share with others who might have had the same issue. If you have any other way of solving this issue, let me know in the comments. Thanks for reading!