如何让元素宽度超出容器？CSS实现宽于父级的段落布局

针对你的布局场景，推荐使用视口单位+负外边距的方案，既可以让.large类段落宽度匹配body/视口，又不会在页面缩小时出现横向滚动条，且无需修改HTML结构：

.large {
  /* 让元素宽度等于视口宽度，匹配body的灰色区域宽度 */
  width: 100vw;
  /* 通过负外边距将元素左右边缘对齐视口边缘 */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

方案说明 #

1. 为什么之前的方法会出现滚动条？
   你之前用的position: relative; width: 150%; left: -25%;是基于父容器#contents的宽度计算的。当页面宽度小于#contents的最大宽度20rem时，150%的宽度会超过视口宽度，触发横向滚动。

2. 视口方案的优势：

   • 用100vw直接让元素宽度等于视口宽度，完美匹配body的灰色区域宽度；
   • calc(-50vw + 50%)计算出元素需要向左/右偏移的距离，刚好让元素边缘对齐视口，不会产生超出视口的部分，因此不会出现滚动条；
   • 元素不会脱离文档流，不会影响后续内容的布局。

适配左侧固定侧边栏 #

如果左侧固定的#sb侧边栏会遮挡.large元素的左侧内容，可以根据侧边栏的宽度调整外边距：
假设#sb的宽度是16rem，修改代码如下：

.large {
  width: calc(100vw - 16rem);
  margin-left: calc(-50vw + 50% + 16rem);
  margin-right: calc(-50vw + 50%);
}

这样.large元素会从侧边栏右侧开始，一直延伸到body的最右侧，宽度和body的内容区域一致。

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