页面滚动时Blob与Blur效果仅停留在顶部问题求助

参考教程制作的个人作品集网页，添加内容后，Blob和模糊效果仅停留在页面顶部区域，滚动到页面底部时无法覆盖对应区域，请问问题出在哪？

问题原因 #

1. 模糊层高度受限：#blur设置了height: 100%，但body的height: 100%仅表示占满当前视口高度，当页面内容超过视口时，body不会自动拉伸高度，导致#blur只能覆盖第一屏范围，下方内容无法被模糊效果覆盖。
2. 绝对定位不跟随滚动：#blob和#blur都使用position: absolute，这种定位默认相对于初始视口，页面滚动时元素不会跟随内容下移，只会固定在顶部区域。
3. 内容嵌套错误：所有下方内容（About、Projects等区块）都嵌套在#blur内部，而#blur高度不足，这些内容超出模糊层范围后，自然无法被效果覆盖。

修复步骤 #

1. 让页面高度自适应内容 #

修改html和body的CSS，确保它们能随内容自动拉伸：

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: black;
  min-height: 100vh; /* 最小占满视口，内容增多时自动拉长 */
  width: 100%;
  margin: 0rem;
  --scrollbar-width: 0.4rem;
  --light-color: aquamarine;
  --dark-color: mediumpurple;
}

2. 把模糊层改为固定定位 #

让#blur始终覆盖整个页面，不受滚动影响：

#blur {
  min-height: 100vh;
  width: 100%;
  position: fixed; /* 固定定位，始终跟随视口 */
  z-index: 2;
  backdrop-filter: blur(12vmax);
  top: 0;
  left: 0;
}

3. 将下方内容移出模糊层 #

把.section区块从#blur内部移出，避免被固定定位的模糊层限制：
修改HTML结构：

<body>
  <div id="blob"></div>
  <div id="blur">
    <header>
      <!-- 头部导航内容 -->
    </header>
    <div class="container">
      <h1 data-value="FRONTEND">FRONTEND</h1>
      <h2>Zsolt Pál</h2>
    </div>
    <div class="spacer"></div>
  </div>
  <!-- 把这段内容移到#blur外部 -->
  <div class="section">
    <!-- About Me、Projects、Socials相关内容 -->
  </div>
  <script src="app.js"></script>
</body>

4. 调整内容区块的定位 #

移除.section的绝对定位，让它正常流式布局：

.section {
  /* 删除position: absolute和top: 100% */
  background-color: transparent;
  z-index: 4;
  scroll-behavior: smooth;
  transition: 0.5s;
  padding-top: 10vh; /* 增加内边距，避免与顶部内容重叠 */
}

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