窗口缩小resize时子元素offsetWidth/offsetHeight异常偏移问题求助

问题原因 #

缩小窗口时，浏览器的resize事件会在页面布局还没完全更新完成时触发，此时获取到的父元素offsetWidth/offsetHeight并非最终准确值，多次resize后就会累积出偏移量。移除margin:0能消除问题，是因为默认margin让父元素不紧贴窗口边缘，滚动条的影响被抵消，但这不符合全屏需求。

修复方案 #

方案1：用requestAnimationFrame延迟尺寸计算 #

把尺寸设置逻辑放到requestAnimationFrame中，确保在浏览器完成布局更新后再执行，保证获取的尺寸是最新的：

const parent = document.getElementById("parent");
const child = document.getElementById("child");

const matchDimensions = () => {
  requestAnimationFrame(() => {
    child.style.width = parent.offsetWidth + "px";
    child.style.height = parent.offsetHeight + "px";
  });
};

matchDimensions();
window.addEventListener("resize", matchDimensions);

方案2：直接用窗口视口尺寸设置 #

既然父元素是全屏布局，直接用window.innerWidth和window.innerHeight设置子元素尺寸，绕开父元素尺寸计算的偏差：

const child = document.getElementById("child");

const matchDimensions = () => {
  child.style.width = window.innerWidth + "px";
  child.style.height = window.innerHeight + "px";
};

matchDimensions();
window.addEventListener("resize", matchDimensions);

方案3：固定盒模型并隐藏滚动条 #

如果页面不需要滚动，给html、body和父元素添加overflow: hidden，同时锁定盒模型，避免滚动条影响尺寸计算：

html, body, #parent {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#child {
  background: red;
}

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