如何让元素延伸至视口外以消除生硬边缘？

问题原因 #

你用负margin的方法无效，是因为浏览器的弹性滚动区域（滚动超出页面边界的部分）显示的是html/body的默认背景色，而且负margin会导致元素宽度超出视口，触发不必要的水平滚动。

解决方案1：覆盖弹性滚动边缘的背景（无限延伸效果） #

用固定定位的伪元素让背景色填满整个视口（包括滚动到边界外的区域），同时不影响页面其他部分的背景：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>MWE</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    section {
      padding: 50px;
      position: relative;
      z-index: 1; /* 确保内容在背景上方 */
    }

    .black {
      color: white;
    }

    .black::before {
      content: '';
      position: fixed;
      inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0 */
      background-color: black;
      z-index: -1; /* 把背景放在内容下方 */
    }
  </style>
</head>
<body>
  <section class="black">mwe</section>
  <!-- 测试滚动效果 -->
  <section style="height: 2000px; padding: 50px">往下滚动，这部分背景恢复默认</section>
</body>
</html>

这个方案的效果是：只要.black区块在可视范围内，无论怎么滚动（包括超出视口的弹性滚动），整个浏览器窗口的背景都是黑色；当滚动到没有这个区块的区域，背景变回默认白色。

解决方案2：仅覆盖页面滚动宽度（无弹性滚动需求） #

如果不需要覆盖弹性滚动的边缘，只是让区块背景填满页面的实际滚动宽度，用以下方式更简单：

section.black {
  background-color: black;
  color: white;
  padding: 50px;
  width: 100%;
  min-width: 100vw;
  margin-left: calc(-50vw + 50%); /* 让区块左右对齐视口边缘，内容保持居中 */
}

这种方式不会触发不必要的水平滚动，区块背景会跟着页面内容的宽度延伸，不会出现白色边缘。

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