带右侧margin的不同嵌套区块宽度百分比布局求助

这个问题的核心在于你试图用固定宽度加margin的方式控制右侧区块，但这样会导致总宽度超出可用空间，而padding又会让背景色延伸到不需要的区域。其实我们可以利用CSS绝对定位的特性来完美解决这个问题：

核心思路 #

给.right区块同时设置left和right属性，让浏览器自动计算它的宽度：

• left: 25% 确保右侧区块和左侧25%宽度的区块完美贴合
• right: 30px 直接在右侧留出30px的空白（替代原来的margin-right）
• 不需要手动设置width，浏览器会自动填充left和right之间的空间，背景色也只会覆盖这个计算出来的宽度区域，不会溢出

修改后的完整代码 #

CSS部分

body {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: grey;
}
.left {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  left: 0;
  width: 25%;
  border-right: 1px solid #eeeeee;
  background-color: lightblue;
}
.right {
  position: absolute;
  /* 移除原来的width和margin-right */
  left: 25%; /* 和左侧区块对齐 */
  right: 30px; /* 右侧保留30px空白 */
  top: 45px;
  bottom: 0;
  background-color: yellow;
}

HTML部分（保持不变）

<body>
  <div class="main">
    <div class="left">TEST</div>
  </div>
  <div class="right">TEST</div>
</body>

为什么这个方案有效？ #

• 绝对定位元素如果同时设置了left和right（且没有固定width），浏览器会自动计算宽度为容器宽度 - left值 - right值，完美适配剩余空间
• right:30px相当于给右侧区块设置了一个“固定的右外边距”，但不会像margin-right那样导致宽度溢出
• 背景色只会填充到right:30px的位置，完全符合你不想要背景溢出的需求

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