To understand this question, we must first know what these two units (vw, vh) mean. vw (vh) is relative to the viewport width (height) of the browser, 100vh is equal to the viewport width of the browser, setting vw and vh will recalculate the width and height when the viewport changes.
So here comes the question, what is the viewport of a browser, look at the following picture:
In the picture above, the area framed by the red line is the viewport of the browser, not the entire visible area of the browser, nor the area covered by the green background.
Knowing this, we should set 100vw and 100vh for a box so that the box just covers the browser viewport. So why are there horizontal and vertical scroll bars?
The code for the image above is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100vw;
height: 100vh;
background: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In the code, we set a width of 100vw, a height of 100vh, and a background color of green for a box in the body whose class is box. We'll notice that this green background has some white gaps from the top and left of the viewport. This gap is caused by the browser adding default styles to the body. We can see these browser styles through the developer tools panel, as shown below:
It can be seen that the browser sets an 8px margin for the body.
Due to the existence of this margin, and the height of our box is the height of the entire viewport, the width and height of the body will be stretched by the green box, causing the viewport to fail to fully display the body element.
For the browser, if there is any element that cannot be displayed in the viewport, the browser will automatically add a scroll bar. This scroll bar (different from the scroll bar that appears due to setting overflow:scroll) will always appear next to the viewport. The right or bottom side of the viewport, and this scrollbar is also part of the viewport.
So at the beginning, the viewport cannot fully display the body element regardless of whether it is horizontal or vertical, resulting in the appearance of horizontal and vertical scroll bars.
There are the following ways to eliminate the scroll bar without changing the two existing properties of the green box,
- The first solution is to set the top, bottom, left, and right margins of the body to 0. (Note that if the outer margin of any direction of the body is not 0, scroll bars may appear in both horizontal and vertical directions, because the appearance of horizontal scroll bars will make the height of the viewport higher, and the appearance of vertical scroll bars makes the viewport width wider.)
- The second solution is to set max-width: 100% for the green box to make the horizontal scrollbar disappear.
- The third solution is to set overflow hidden (overflow:hidden) to the body element
- The fourth solution is to set overflow hidden overflow:hidden for html elements)
The third and fourth solutions will cause part of the content not to be displayed, and as the visible area changes, the hidden part will also change.
Add details about overflow: overflow is a shorthand attribute, including overflow-x, overflow-y, and the overflow value of all elements is visible by default. Its value can be scroll (the scroll bar appears), hidden (the overflow part is hidden). When the viewport can display all elements normally, setting overflow:scroll to the body or html element will result in horizontal and vertical scroll bars that cannot be slid.