Question

我创建了我的网页结构，该网页由一个标题和7个div组成，所有这些都有width:100vw。所有元素都有margin:0和box-sizing:borden-box。

是否可以在不使用overflow-x:hidden？

的情况下禁用水平滚动

我将在下面发布相关的代码部分，请询问您是否要查看整个文档。

HTML：

<body>
        <header id="nav">
            <ul>
              <li><a href="#">Circle</a></li>
              <li><a href="#">Square</a></li>
              <li><a href="#">Line</a></li>
            </ul>
        </header>

        <div id="p5_banner" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_circle" class="p5_container"></div>

        <div class="arrow"></div>       
        <div id="p5_square" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_line" class="p5_container"></div>
</body>

CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width:100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

#nav {
    height:100px;
    width:100vw;
    padding: 0 2vw;
    font-weight: 700;
}

.p5_container {
    width: 100vw;
    height: calc(100vh - 100px - 150px);
    background-color: beige;
}

.arrow {
    width: 100vw;
    height: 150px;
    background-color: #6195B2;
}

我很抱歉，如果之前已经说过，我能找到的所有答案都涉及溢出属性或错误，其中元素超过100％的视口。

谢谢。

Answer 1

将max-width:100%;和width:100vw提供给*课程。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width:100%;
  width:100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height:100px; 
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container { 
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {  
  height: 150px;
  background-color: #6195B2;
}

<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>
  <div id="p5_banner" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Answer 2

只需删除指定的所有宽度，因为这是块元素的默认行为，取宽度的100％。你需要注意，因为 100vh 不等于 100％。第一个包括滚动条的计算：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height: 100px;
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container {
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {
  height: 150px;
  background-color: #6195B2;
}

<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>

  <div id="p5_banner" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Answer 3

您必须使用％而不是 vw ，Bacause vw 获取浏览器视口的整个宽度。此页面还提供了垂直滚动条。这就是为什么100vw宽度不减去右侧滚动条的宽度和水平滚动的原因。而是使用：

width: 100vw;

如果你想真正删除水平滚动，请使用：

width: 100%;

禁用水平滚动而不会隐藏溢出

3 个答案: