约束两个相同大小的HTML div

Question

我有一个iframe，我希望在此div上创建另一个iframe作为叠加层一段时间。因此，新叠加层div和iframe的大小在每种情况下都应相同。 iframe的大小可能会因浏览器窗口大小调整，移动拆分器等原因而发生变化。我尝试使用onResize中的jQuery函数，但它似乎不起作用，除了浏览器窗口调整大小。有人可以建议一种处理所有案件的方法吗？

提前致谢。

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;