设置body的高度/宽度时出现问题

Question

我正在尝试创建一个普通的HTML页面，我已经设置了正文的高度/宽度 用Vh和Vw

* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}

<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>

问题是在左侧创建了一个额外的内容，它是身体我做错了什么 我无法放置jsfiddle演示，因为在演示中不会发生此问题，我在其他计算机上尝试了HTML页面，并且存在相同的问题

Answer 1

不确定是否正确理解您的问题，但如果您的问题是水平滚动条，那么只需将"溢出：自动;"更改为"溢出-x：隐藏;" 如果您不想要垂直滚动，请制作"溢出：隐藏";

body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}