Question

我有这个基本的事件处理程序

window.addEventListener("resize", adjustSize);

一切正常，直到使用网格和flex进行更复杂的设计为止：我准备了最少的测试示例here（请参见下面的代码）。然后，通过按预期方式拖动窗口的侧面来调整窗口大小，但是不连续的调整大小（最大化按钮）会导致调整大小的元素放错了位置（条形图的末端未到达框边框的外侧）。

所以我猜想父元素被调整了大小，然后触发了调整大小处理程序，然后通过调整其他元素对其进行了更多调整（我在最新的Chrome和Opera，Windows 7上进行了测试）。确实，稍微延迟处理程序即可解决问题：

window.addEventListener("resize", ()=>setTimeout(adjustSize,10));

但是，延迟太短（1ms）并没有帮助。 有没有一种解决方案？

function adjustWidth() {
  bar.style.width = box.offsetWidth + 'px';
  bar.style.height = box.offsetHeight + 'px';
}
adjustWidth();
window.addEventListener("resize", adjustWidth);

html, body { height: 100%; }
body { margin: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
#box { box-sizing: border-box; border: 1em solid green; grid-column: 1 / span 9; }
#bar { position: absolute; box-sizing: border-box; }
#bar { display: flex; align-items: stretch; flex-direction: column; }
.sep { background: black; flex: 0 0 0.25em; }
.board:first-child { flex: 0 0 50%; }
.board:last-child { flex: 1 0 auto; }

<div id="bar">
  <div class="board"></div>
  <div class="sep"></div>
  <div class="board"></div>
</div>
<div id="box"></div>

在窗口调整大小上设置元素大小

0 个答案: