約束兩個相同大小的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

回答

相關問題