コードと説明でわかりやすく知識を学べます！
実際のビジネス展開では、iframeを使っていて、iframeの内側と外側の背景を統一した状況に設定したい場合、難しいです！
従来の理解では、iframeは閉じておらず、背景が壊れているはずです！ 今日、それを解決するために
早速ですが、index.htmlをご覧ください。
<style>
* {
margin: 0;
padding: 0;
}
<!--シンプルな左右レイアウトを実現する>
.box {
display: flex;
width: 100%;
height: 100vh;
}
.left {
width: 200px;
height: 100vh;
background-color: blue;
}
.main {
flex: 1;
height: inherit;
background: url(https://..//=,&;=&;=&;=&;=&;=&;=?=&;=06);
background-repeat: no-repeat;
background-size: cover;
}
.right-top-text {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 2px solid red;
overflow: hidden;
}
/* iframeを設定し、デフォルトのスタイルを削除する*/
#iframe-container {
/* 手動で表示を設定する*/
display: block;
width: 100%;
/* 50pxのボーダー2pxのコンテンツの上に、残りの高さを占めるようにiframeを設定する*/
height: calc(100vh - 50px - 2px);
border: none;
}
</style>
<div class="box">
<div class="left">
左側の位置
</div>
<div class="main">
<div class="right-top-text">以下は、iframeの外側にあるコンテンツである。</div>
<iframe id='iframe-container' scrolling ='no' allowtransparency="true"
src="./main.html"></iframe>
</div>
</div>
main.html
<body>
右のアドレス
<h3>背景はiframeの外側に設定される。</h3>
</body>
レンダリング
フォーカス
- allowtransparency="true "を設定すると、iframeの外側に背景が追加されます。
- 手動でiframeにdisplay:blockを追加してください。以前のブラウザは小さなバグを持っているiframeは、デフォルトで1〜2pxのギャップを持っている、デバッグページは、このデータを見ることができない、iframeは、デフォルトではインライン要素です。
- 右側のiframeの上にコンテンツがある場合、height: 100% を追加しないでください。
