网页缩放时firsthalf区域右侧出现白边如何解决？

页面包含两个div：.firsthalf（页面第一部分）和.secondhalf（剩余部分），存在以下问题：

• 放大网页时，.firsthalf区域右侧出现大块白边，.secondhalf区域无此问题
• 需要保证缩放时背景图不发生变形
• 已尝试调整overflow属性、min-width、max-width，均未解决问题

相关代码 #

.firsthalf{
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg); 
    background-size: cover;   
    background-position: center;
    min-width: 100%;
    overflow-x: hidden  
}
.secondhalf{
    background-color: black;
    min-width: 100%;
    display: table;
    height: 4000px;
}

核心问题分析 #

min-width: 100%基于父元素宽度计算，页面缩放时易因全局默认margin/padding或视口计算偏差导致元素宽度不足；overflow-x: hidden无法从根本解决宽度适配问题。

修改步骤 #

1. 重置全局默认样式，避免body默认margin/padding引发的横向布局偏差：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 全局禁止横向滚动条 */
}

2. 调整.firsthalf的宽度属性，改用width: 100vw（视口宽度）替代min-width: 100%，确保元素始终铺满整个视口宽度，同时去掉无效的overflow-x: hidden：

.firsthalf{
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg); 
    background-size: cover;   
    background-position: center;
    width: 100vw;
}

3. 统一.secondhalf的宽度设置（可选，保持布局一致性）：

.secondhalf{
    background-color: black;
    width: 100vw;
    display: table;
    height: 4000px;
}

效果说明 #

• width: 100vw让元素宽度始终等于当前视口宽度，彻底解决缩放时的右侧白边问题
• background-size: cover配合background-position: center保留背景图缩放不变形的需求
• 全局overflow-x: hidden确保页面不会出现横向滚动条

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