CSS height: calc(100vh); Vs height: 100vh;

There is “NO” major difference in the results and execution of the CSS properties “height: calc(100vh);” and “height: 100vh;”. The only difference is that they have been written in different ways. Otherwise, the functionality the “height: calc(100vh);” provides is the same as that provided by the “height: 100vh;” and vice versa.

Let’s understand this practically by applying both properties one by one separately.

How to Apply “height: 100vh;” Property in HTML?

Let’s apply the “height: 100vh;” property to an HTML element by first creating a div container element with an id assigned to it and then adding the id selector to apply the “height: 100vh” property to a div container element:

In the above HTML code snippet:

• A “<div>” container element is added with the “id” declared as “mydiv”.
• Inside the div container element, define some text and specify the “<div>” container.

Now, it is required to add the “id” selector referring to the HTML element added above:

The CSS style element has the “id” selector that has some CSS properties inside:

• The “border” property creates a black colored “3px” border for the div container.
• The “padding” property defines the space between the border of the div and the content inside the div as “7px”.
• The “width” property defines the width or the horizontal length of the container.
• The “text-align” property aligns the div content (text inside the div) to the center of the div container.
• The “height: 100vh” property defines the height or the vertical length of the div container to “100 viewport height”. This is the main CSS property to be applied to the HTML element here.

As a result, the height of the element is defined from the top to the bottom covering the whole vertical area of the screen:

How to Apply “height: calc(100vh);” Property in HTML?

Now, if we apply the “height: calc(100vh)” property to the same HTML code snippet as added above like the following:

In the CSS style element, the only difference will be that of the “height” property that is now defined as “calc(100vh)”. The dots inside the “#mydiv” selector refers to the same properties that are applied in the previous section:

It can be observed that there is no difference in the result produced by this value, if compared with the other (height: 100vh) property:

This sums up the functionality of both the CSS “height: 100vh” and “height: calc(100vh)” properties.

Conclusion

There is no difference in the execution and results of the “height: 100vh” and “height: calc(100vh)” CSS properties. When any of these properties are applied to the CSS style element, it makes the HTML element cover the whole vertical area of the screen according to its horizontal length. This article explained the procedure to apply the stated height property values.