浏览器窗口调整及面板拖拽后出现空白问题求助

问题根源 #

缩小并拖拽调整浏览器窗口后，section2的宽度被锁定为调整后的像素值，当窗口重新最大化时，它没有自动重置为全屏宽度，导致右侧出现空白区域。

具体修复方法 #

• 改用自适应宽度替代固定值：修改section2的CSS，用视口宽度确保始终占满屏幕：

  .section2 {
    width: 100vw;
    min-width: 100%;
    box-sizing: border-box; /* 防止内边距、边框额外撑开宽度 */
    margin: 0;
    padding: 0;
  }
  

• 监听窗口 resize 事件强制重置宽度：添加JS代码，每次窗口尺寸变化时重新设置section2的宽度：

  window.addEventListener('resize', () => {
    const section2 = document.querySelector('.section2');
    section2.style.width = '100vw';
    // 顺便处理可能出现的横向滚动条问题
    document.body.style.overflowX = 'hidden';
  });
  

• 确保父容器无限制：给根容器html和body设置基础样式，避免约束子元素宽度：

  html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  

按照上面的修改，section2会始终自适应浏览器窗口的宽度，无论窗口如何调整都不会出现右侧空白。

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