全屏Header下方添加内容引发页面右侧溢出问题求助

问题根源 #

你的代码里有两个关键问题导致水平滚动条：

• body 设置了 width: 100vw：当页面出现垂直滚动条时，100vw 会包含滚动条的宽度，导致内容宽度超出视口，触发水平滚动。
• header 内的 video 和 .gradient-block-fade 使用了 width: 100vw：这两个绝对定位元素的宽度会包含滚动条宽度，即使header本身是100%宽度，也会造成溢出。

修复步骤 #

1. 移除body的width设置：body作为块级元素默认会自动占满可用宽度，不需要手动设置100vw。
2. 替换100vw为100%：将video和.gradient-block-fade的width:100vw改为width:100%，它们会继承header的宽度，避免滚动条影响。

修改后的代码 #

CSS部分

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  /* 移除width:100vw */
  background-color: rgb(30, 30, 30);
  display: flex;
  flex-direction: column;
  font-family: 'Quicksand';
  font-size: 14pt;
  font-weight: 500;
  color: white;
  position: relative;
  z-index: 1;
}

body :not(.banner-container) {
  z-index: 2;
}

header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

header .navbar-container {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .navbar-container .website-logo img {
max-height: 2rem;
}

header .navbar-container .content-navigator ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
  gap: 2rem;
}

header .navbar-container .content-navigator ul li a {
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  color: white;
}

header .navbar-container .content-navigator ul li a:hover {
  opacity: 0.7;
}

header video {
  position: absolute;
  width: 100%; /* 替换100vw为100% */
  height: 100vh;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(40%);
  z-index: 0;
}

header .gradient-block-fade {
  width: 100%; /* 替换100vw为100% */
  height: 100vh;
  position: absolute;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(30, 30, 30, 1));
  z-index: 2;
}
/* other styling below */

HTML部分（无需修改）

<body>
  <header>
    <video autoplay loop muted>
      <source src="css/imgsrc/gameplay.mp4" type="video/mp4">
    </video>
    <div class="gradient-block-fade">
        <!-- div untuk gradient block-->
    </div>
    <div class="navbar-container">
      <div class="website-logo">
        <a href="#Home"><img src="css/imgsrc/osu-icon-placeholder.jpg" alt="" srcset=""></a>
      </div>
      <div class="content-navigator">
        <ul>
          <li><a href="#Search">Search</a></li>
          <li><a href="#Rankings">Rankings</a></li>
          <li><a href="#Forum">Forum</a></li>
          <li><a href="#Support">Support</a></li>
        </ul>
      </div>
    </div>
  </header>
    <!-- other content below -->
</body>

额外说明 #

如果修改后仍有滚动条，可以检查后续添加的内容是否存在超出宽度的元素（比如设置了固定宽度且大于视口的元素），但核心问题已经通过上述步骤解决。

内容的提问来源于stack exchange，提问作者reiisen