What is 100vh in css

In CSS, "100vh" refers to a relative length value with a size of "100" and a unit of "vh"; "vh" is a relative length unit in CSS, which is relative to the height of the window. "100vh" means that the height of the element is equal to the height of the current browser's view window, that is, the height of the visible area inside the browser.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is 100vh in css

vh is a relative length unit in css. Relative to the height of the window, the window is divided into 100 units of vh, that is, 1vh is always equal to the height of the current window. One percent of.

The window is divided into 100 units of vh. The advantage of vh is that it can directly obtain the height, but using % cannot correctly obtain the height of the visual area without setting the body height.

The viewport refers to the size of the visible area inside the browser, that is, the size of window.innerWidth/window.innerHeight, excluding the size of the browser area of ​​the taskbar title bar and bottom toolbar.

Therefore, 100vh is equal to the height of the current browser's window, that is, the height of the visible area inside the browser.

Set height:100vh, no matter the element has no content, the element will be stretched to the same height as the screen

Extended knowledge:

• vh: Relative to the height of the window, the window is divided into 100 units of vh;

• vw: Relative to the height of the window The width of the window is divided into 100 units of vw;

• vmax: The larger of the width or height relative to the window. The largest one is divided into 100 units of vmax;

• vmin: The smaller one relative to the width or height of the viewport. The smallest one is divided equally into 100 units of vmin;

(Learning video sharing: css video tutorial, html video tutorial)

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