如何用纯CSS使元素适配页面滚动宽度而非仅屏幕宽度？

这个问题我之前也碰到过——当页面里有超宽元素时，设置了width:100%的header只会适配当前视口宽度，滚动页面后就会发现header和下方超宽元素的宽度对不上。核心原因是默认情况下，width:100%是相对于父元素的内容宽度，而html/body的默认宽度会被限制在视口范围内，不会被内部超宽元素撑开。

下面分享两种纯CSS的解决思路：

方法一：让html/body被内容撑开，同时适配视口 #

修改html和body的宽度属性，允许它们被内部超宽元素撑开，同时添加min-width:100vw确保小屏幕下header依然占满视口：

html, body {
  position: relative;
  width: auto; /* 取消固定的100%宽度，允许被内容撑开 */
  min-width: 100vw; /* 视口较小时，强制占满整个屏幕宽度 */
  margin: 0; /* 移除默认边距，避免不必要的横向滚动 */
}

#A {
  position: relative;
  width: 100%; /* 现在会跟随body的实际宽度（被B撑开后的宽度） */
  background: lightblue;
  color: white;
}

#B {
  position: relative;
  width: 5000px;
  background: darkblue;
  color: white;
}

原理：原来的width:100%把html/body固定在视口宽度，导致超宽元素B只能溢出显示，而body本身宽度不变。改成width:auto后，body会被内部最宽的元素（也就是B）撑开，A的width:100%就会匹配这个撑开后的宽度，同时min-width:100vw保证当页面内容比视口窄时，header依然铺满屏幕。

方法二：用容器包裹header和超宽元素 #

如果不想修改html/body的样式，可以给A和B加一个父容器，让容器被超宽元素撑开，同时保证容器在小屏幕下占满视口：

<div class="page-container">
  <div id="A">A</div>
  <div id="B">B</div>
</div>

.page-container {
  display: inline-block; /* 让容器宽度由内部最宽元素决定 */
  min-width: 100%; /* 视口较小时，容器占满屏幕 */
}

#A {
  width: 100%; /* 相对于容器的宽度，也就是和B一致 */
  background: lightblue;
  color: white;
}

#B {
  width: 5000px;
  background: darkblue;
  color: white;
}

html, body {
  margin: 0; /* 移除默认边距 */
}

原理：inline-block类型的元素宽度会自动适应内部内容的最大宽度，所以容器会被B的5000px宽度撑开，A的width:100%就会继承这个宽度。min-width:100%则保证当B的宽度小于视口时，容器依然占满屏幕，header不会缩成一团。

这两种方法都不需要JS，纯CSS就能完美解决你的问题，你可以根据自己的页面结构选择合适的方案～

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