Question

我有两个全屏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>

Answer 1

这是因为默认情况下BODY元素有自己的边距。你需要把它变为零。您可以查看here (jsfiddle example)。

body {   margin: 0; }

Answer 2

这是一个已知问题。

根据https://caniuse.com/#feat=viewport-units，

＆＃34;目前除了Firefox之外的所有浏览器都错误地认为100vw是整个页面宽度，包括垂直滚动条，当溢出时会导致水平滚动条：自动设置。＆＃34;

您可以添加以下CSS样式来修复它，

html, body {margin: 0; padding: 0; overflow-x:hidden;}

Example (JSBin)

Answer 3

首先，要删除不需要的边距和填充，您应该始终执行CSS重置（将所有浏览器特定属性重置为零）或CSS规范化（将所有属性设置为每个浏览器的相同默认值，但不是零）。出于调试目的，编写以下内容就足够了：

* {
  margin: 0;
  padding: 0;
}

在实际项目中，您绝对应该使用更好的解决方案，例如Eric Meyer’s reset或Normalize.css。

好的，现在我们设法解决了间距问题，但这仍然让我们遇到滚动条问题。有关解决方案，请查看this帖子。它说

（...）由于垂直滚动而存在水平滚动。你可以通过给出max-width：100％来解决。

因此，这是最终解决方案：

* {
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background-color: red;
}

.section.second {
  background-color: green;
}

<div class="section">ASD1</div>
<div class="section second">ASD2</div>

将两个div放在彼此下方时不需要的滚动条

3 个答案: