The IFRAME adaptive method in the web response layout

In the response layout, we should be careful about the width and height of the Width and Height attributes of iframe elements, but when the width or height of the block or height is smaller than the width or height of the IFRAME, the phenomenon of IFRAME element overflows The

This overflowing iframe will destroy the layout of the page. We can use one way to make iframe elements also respond to, and wait and see.

The iframe element itself cannot be retracted, unless the width displayed by JS displayed. But we can wrap the iFrame through an iframe-container element, and at the same time make the width of the iFrame-Container element full of width containing blocks, and based on the length and width ratio of iframe, set the Padding-Bottom percentage of the iFrame-Container element.

In fact, the essence of this method lies in setting the Padding-Bottom property of the iframe-Container element. The purpose of setting this attribute is to set the height of the element in disguise. Because setting a percentage for Padding-BOTTOM is compared to the Width of the parent element, if the percentage of the Height attribute is set, it is compared to the Height of the parent element. Sub-element Height is also 0. Therefore, we can only set attributes for Padding-BOTTOM. In this way, you only need to make iframe elements full of iFrame-Container.