2023年实现HTML section背景占满100vw的方法

无需拆分原有容器结构，用现代CSS就能实现目标效果——让容器内的section背景占满100vw，同时保持内容与容器对齐。核心思路是负外边距+内边距结合视窗单位，具体代码如下：

将第二个section的style替换为：

<section style="margin: 0 calc((100vw - 100%) / -2); padding: 0 calc((100vw - 100%) / 2); background: #333; color: #fff;">

原理说明 #

• margin: 0 calc((100vw - 100%) / -2)：计算视窗宽度与当前容器宽度的差值，将左右外边距设为该差值的负数一半，让section的左右边缘直接延伸到视窗两侧
• padding: 0 calc((100vw - 100%) / 2)：用相同数值设置左右内边距，把section内部的内容重新拉回原容器的宽度范围内，保证内容对齐
• 给background设置你需要的颜色，就能得到通栏背景效果

滚动条优化（可选） #

如果页面存在滚动条，100vw会包含滚动条宽度，可能导致横向溢出。2023年可以用动态视窗单位100dvw代替，它会自动排除滚动条宽度，兼容性覆盖绝大多数现代浏览器：

<section style="margin: 0 calc((100dvw - 100%) / -2); padding: 0 calc((100dvw - 100%) / 2); background: #333; color: #fff;">

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