页面缩放时背景偏移问题求助

针对你遇到的页面缩放时左右背景偏移、留白问题，可通过以下调整修复：

1. 重构容器布局基础 #

首先确保页面根容器和左右分区的布局稳定，避免固定单位导致的适配问题：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.page-wrapper {
  display: flex;
  width: 100vw;
  min-height: 100vh;
}

• min-height: 100vh 保证容器始终覆盖视口高度，缩放时不会出现底部/顶部留白；
• display: flex 让左右分区自动等分宽度，适配不同视口尺寸。

2. 修正左侧背景垂直偏移 #

针对左侧背景缩放时垂直偏移的问题，调整背景定位与缩放规则：

.left-bg {
  flex: 1;
  background: url('你的左侧背景图路径') no-repeat center left;
  background-size: cover;
  background-attachment: local;
}

• background-position: center left 让背景垂直居中、左对齐，避免缩放时上下偏移；
• background-size: cover 确保背景图按比例自适应容器，完全覆盖无空白；
• background-attachment: local 避免固定定位导致的滚动/缩放错位。

3. 修复右侧红色背景留白 #

右侧背景上移留白的核心原因是容器高度未随视口同步，强制设置高度即可解决：

.right-red-bg {
  flex: 1;
  background-color: #ff2d2d;
  min-height: 100vh;
}

• min-height: 100vh 强制容器占满视口高度，缩放时不会出现顶部空白区域。

额外检查项 #

• 移除左右分区的固定width/height值，改用flex:1实现自适应等分；
• 若子元素存在margin-top，可替换为padding-top，避免顶起容器导致错位。

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