What is the unit of vh in css?

vh is a relative length unit in CSS, representing the percentage of the viewport height. 1vh is equal to 1% of the viewport height. The viewport height refers to the height of the visible part of the browser window, excluding the browser. Non-page parts such as toolbars, address bars, and scroll bars.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

vh is a relative length unit in CSS, representing a percentage of the viewport height. Specifically, 1vh is equal to 1% of the viewport height.

Viewport height refers to the height of the visible part of the browser window, excluding non-page parts such as browser toolbars, address bars, and scroll bars. Therefore, vh units can be used to create responsive layouts based on the viewport height. For example, when we want the height of an element to always be equal to half the current viewport height, we can use the following style:

.element {  
height: 50vh;
        }

This will make the height of the .element element always equal to half the current viewport height.

It should be noted that the vh unit is a percentage relative to the viewport height, so it is a relative unit. When the size of the browser window changes, the dimensions of the elements adjust accordingly.

The above is the detailed content of What is the unit of vh in css?. For more information, please follow other related articles on the PHP Chinese website!