我有两个全屏 div，它们彼此相对放置。但是当我访问该页面时，浏览器总是显示不需要的滚动条和大于 100vw 的宽度。当只有一个 div 时，整个事情就像一个魅力。在这里将不胜感激:)
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<style>
.section {
position: relative;
width: 100vw;
height: 100vh;
background-color: red;
}
.section.second {
background-color: green;
}
</style>
</head>
<body>
<div class="section">ASD1</div>
<div class="section second">ASD2</div>
</body>
</html>最佳答案
这是一个已知问题。
根据 https://caniuse.com/#feat=viewport-units ,
"Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."
您可以添加以下 CSS 样式来修复它，
html, body {margin: 0; padding: 0; overflow-x:hidden;}
关于html - 将两个 div 放在彼此下方时不需要的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48692074/