如何在带内边距的CSS容器中实现元素全屏宽度？

问题分析 #

你的代码存在两个核心问题：

• 默认box-sizing: content-box规则下，.container的width:100%是内容区宽度，加上左右各20px的padding后，容器总宽度会超出屏幕，导致横向滚动条。
• .item的width:100%仅覆盖.container的内容区（屏幕宽度-40px），自然无法占满屏幕宽度。

方法一：负margin + box-sizing（推荐） #

通过给.item设置负margin抵消容器的padding，同时用box-sizing: border-box修复容器溢出问题：

修改后的完整CSS代码：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  background-color: red;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box; /* 让width包含padding，避免容器溢出屏幕 */
}

.item {
  width: calc(100% + 40px); /* 容器左右padding共40px，扩展item宽度 */
  margin-left: -20px; /* 向左偏移抵消容器左padding */
  margin-right: -20px; /* 向右偏移抵消容器右padding */
  height: 20%;
}

.item:nth-child(odd) {
  background-color: blue;
}

.item:nth-child(even) {
  background-color: white;
}

方法二：绝对定位方案 #

如果不需要依赖文档流布局，可以用绝对定位让item直接贴住屏幕边缘：

修改后的完整CSS代码：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: relative; /* 作为绝对定位的参考容器 */
  background-color: red;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box; /* 避免容器溢出 */
}

.item {
  position: absolute;
  left: 0;
  right: 0; /* 左右贴住屏幕边缘 */
  height: 20%;
}

.item:nth-child(1) { top: 0; }
.item:nth-child(2) { top: 20%; }
.item:nth-child(3) { top: 40%; }
.item:nth-child(4) { top: 60%; }
.item:nth-child(5) { top: 80%; }

.item:nth-child(odd) {
  background-color: blue;
}

.item:nth-child(even) {
  background-color: white;
}

两种方法都能实现你要的效果：蓝白矩形占满屏幕宽度，同时.container的内边距依然保留（若容器内有其他元素，会受到padding的约束）。

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