约束两个相同大小的HTML div

我有一个iframe，我想创建另一个div作为此iframe的覆盖一段时间。因此，新覆盖div和iframe的大小应该在每种情况下都相同。 iframe的大小可能会因浏览器窗口大小调整，移动分离器等原因而发生变化。我尝试使用jQuery中的onResize函数，但除浏览器窗口调整大小外，它似乎不起作用。有人可以请建议一种方法来处理所有的情况？约束两个相同大小的HTML div

在此先感谢。

来源

2015-04-07 Aarkan

我会用CSS类样式他们，给双方（div和iframe的）内容相同的类 –

给他们一个具有一定宽度的父div。然后，最大的DIV的覆盖和iframe的

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

来源

2015-04-07 18:38:11

这里是相同的回答，但元素是响应：http://jsfiddle.net/austinthedeveloper/crt0sdg9/ – austinthedeveloper

不错，谢谢@austinthedeveloper –

约束两个相同大小的HTML div

回答

相关问题