Here is the code:
body {
margin: 0;
padding: 0;
}
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.body {
width: 100vw;
height: 100vh;
background-color: black;
padding-top: 20vh;
}
.content {
width: 50vw;
height: 1000px;
background-color: yellow;
}<body>
<div class="body">
<div class="content">
</div>
</div>
</body>The problem is fairly simple. When I add padding-top to the .body div, there is a horizontal overflow. I would like to know why does the y-axis padding affect the x-axis width.
I know I can get rid of it using overflow-x: hidden, but it’s a dirty solution.
>Solution :
Just use a percentage value:
.body {
width: 100%; /* Percentage-based (full width of <body>) */
}
More About VW and VH
Viewport units represent a percentage of the current browser viewport (current browser size). While similar to % units, there is a difference. Viewport units are calculated as a percentage of the browser’s current viewport size. Percentage units on the other hand are calculated as a percentage of the parent element, which may be different than the viewport size.
Reference: What’s The Difference Between PX, EM, REM, %, VW, and VH?
body {
margin: 0;
padding: 0;
}
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.body {
width: 100%; /* Percentage-based (full width of <body>) */
height: 100vh;
background-color: black;
padding-top: 20vh;
}
.content {
width: 50vw;
height: 1000px;
background-color: yellow;
}<body>
<div class="body">
<div class="content">
</div>
</div>
</body>