页面背景色无法铺满左右边缘的问题求助

问题排查与解决步骤 #

1. 重置浏览器默认样式
   浏览器自带的html/body默认边距是常见诱因，先清零这个默认样式：

   html, body {
     margin: 0;
     padding: 0;
   }
   

2. 突破嵌套容器的宽度约束
   如果目标section嵌套在带max-width+margin:auto的容器（比如通用的.container类）里，背景会被容器宽度限制。可以用伪元素绕开这个限制，实现全屏背景：

   /* 给目标section添加该类 */
   .full-bg-section {
     position: relative;
     z-index: 1;
     /* 保留内容的居中宽度控制 */
     max-width: 1200px;
     margin: 0 auto;
     padding: 3rem 2rem;
   }
   
   /* 用伪元素生成全屏背景层 */
   .full-bg-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #你的背景色值;
     z-index: -1;
   }
   

3. 强制全屏宽度的快捷写法
   不想用伪元素的话，也可以直接给section设置视口宽度并修正位置：

   body {
     overflow-x: hidden; /* 避免出现横向滚动条 */
   }
   
   .full-bg-section {
     width: 100vw;
     margin-left: calc(-50vw + 50%);
     background-color: #你的背景色值;
   }
   

额外检查点 #

• 确认没有外层容器（比如自定义的.wrapper）设置了overflow: hidden或固定宽度，导致背景被截断。
• 如果使用了CSS框架（如Bootstrap），框架自带的容器类默认有左右内边距和最大宽度，需针对性调整背景元素的层级或样式。

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