调整视口大小时，固定定位并列div间出现多余空白问题

首先，咱们来拆解你遇到的空白问题的核心原因：

• 你的左侧元素width: 80%是基于视口宽度计算的（也就是80vw）；
• 而右侧元素的transform: translate(80%)是基于元素自身宽度计算的——因为你的右侧元素设置了width: 100%，所以这个80%其实是80% * 100vw = 80vw，看起来数值一致，但问题出在浏览器渲染时的亚像素处理：
  当视口宽度为非整数像素（比如1001px），80%计算后会得到带小数的像素值（800.8px），浏览器对元素宽度和transform位移的小数像素取整规则可能不一致，导致两者边缘出现1px左右的间隙，在拖拽窗口resize时，这种计算差异会反复出现。

接下来是几种能彻底解决问题的方案，都能满足你「左侧宽度用百分比、右侧位移与之同步」的需求：

方案1：用视口单位(vw)统一位移基准 #

把右侧的transform位移从基于自身宽度的百分比，改成基于视口宽度的vw单位，这样和左侧元素的宽度计算基准完全一致：

.left, .right {
  height: 100px;
  position: fixed;
}
.left {
  width: 80%;
  left: 0;
  background: #500;
}
.right {
  width: 100%;
  left: 0; /* 这里把right:0改成left:0，让元素从视口左边缘开始 */
  background: #005;
  transform: translateX(80vw); /* 用80vw替代80%，和左侧width的80%完全同步 */
}

这样修改后，左侧元素的右边缘是80vw，右侧元素的左边缘也是80vw，两者完全对齐，不会出现计算偏差导致的空白。

方案2：用CSS变量统一控制百分比 #

如果后续需要调整这个百分比，用CSS变量可以更方便地同步修改，避免手动改两处：

:root {
  --left-width-percent: 80; /* 定义变量存储百分比数值 */
}

.left, .right {
  height: 100px;
  position: fixed;
}
.left {
  width: calc(var(--left-width-percent) * 1%);
  left: 0;
  background: #500;
}
.right {
  width: 100%;
  left: 0;
  background: #005;
  transform: translateX(calc(var(--left-width-percent) * 1vw));
}

以后要调整左侧宽度，只需要修改:root里的--left-width-percent值即可，左侧宽度和右侧位移会自动同步。

方案3：如果不需要右侧元素占满整个视口（简化版） #

如果你的需求只是让右侧元素填充视口剩余的20%宽度，完全可以不用transform，直接通过定位实现：

.left, .right {
  height: 100px;
  position: fixed;
}
.left {
  width: 80%;
  left: 0;
  background: #500;
}
.right {
  width: 20%;
  left: 80%; /* 直接对齐左侧元素的右边缘 */
  background: #005;
}

这种方法最简洁，完全避免了transform带来的计算差异问题，适合不需要右侧元素占满整个视口的场景。

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