Web応答レイアウトのIFRAME適応方法

応答レイアウトでは、iframe要素の幅と高さの属性の幅と高さに注意する必要がありますが、ブロックまたは高さの幅または高さがiframeの幅または高さよりも小さい場合、iframeの現象は要素がオーバーフローします

このあふれたiframeは、ページのレイアウトを破壊します。 1つの方法を使用して、IFRAME要素に応答し、待機して見ることができます。

JSによって表示された幅が表示されない限り、IFRAME要素自体を撤回することはできません。しかし、iframeをiframe-container要素に包むことができ、同時にiframe-container要素の幅をブロックを含む幅でいっぱいにし、iframeの長さと幅比に基づいて、パディングボトムパーセンテージを設定しますiframe-container要素の。

実際、この方法の本質は、この属性を設定する目的を、変装して要素の高さを設定することです。パディングボトムの割合を親子要素の幅と比較すると、高さの属性の割合が設定されているため、サブエレメントの高さは0ですパディングボトムの属性のみを設定できます。このようにして、iframe-containerでいっぱいのiframe要素を作成するだけです。