javascript - 限制两个 HTML div 大小相同

Question

我有一个 iframe，我想创建另一个 div 作为此 iframe 的覆盖层一段时间。因此，新覆盖层 div 和 iframe 的大小在每种情况下都应该相同。 iframe 的大小可能会因多种原因而改变，例如调整浏览器窗口大小、移动拆分器等。我尝试使用 jQuery 中的 onResize 函数，但是除了调整浏览器窗口大小之外，它似乎不起作用。有人可以建议一种处理所有情况的方法吗？

提前致谢。

Answer 1

给它们两个具有一定宽度的父div。然后最大化覆盖层和 iframe 的 div 内容

.container {
  width: 750px;
  height: 400px;
  position: relative;
}
.overlay, iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.overlay {
  z-index: 3;
  background: #0cc;
  opacity: .7;
}
iframe {
  z-index: 2;
}

<div class="container">
  <div class="overlay"></div>
  <iframe src="http://wikipedia.com"></iframe>
</div>