Die adaptive Iframe -Methode im Web -Antwort -Layout

Im Antwortlayout sollten wir vorsichtig mit der Breite und Höhe der Breite und der Höhenattribute von Iframe -Elementen sein, aber wenn die Breite oder Höhe des Blocks oder der Höhe kleiner als die Breite oder Höhe des Iframe ist, ist das Phänomen des Iframe Element überläuft die

Dieses überfüllte Iframe zerstört das Layout der Seite. Wir können eine Möglichkeit nutzen, um Iframe -Elemente zu reagieren und zu warten.

Das Iframe -Element selbst kann nicht zurückgezogen werden, es sei denn, die von JS angezeigte Breite wird angezeigt. Wir können das Iframe jedoch durch ein Iframe-Container-Element einwickeln und gleichzeitig die Breite des Iframe-Container-Elements voller Breite mit Blöcken machen und auf der Grundlage des Längen- und Breitenverhältnisses von Iframe den Prozentsatz des Padding-Bottoms einstellen des Iframe-Container-Elements.

Tatsächlich liegt die Essenz dieser Methode bei der Festlegung der Padding-Bottom-Eigenschaft des Iframe-Container-Elements. Da ein Prozentsatz für die Polsterung mit der Breite des übergeordneten Elements verglichen wird, wird der Prozentsatz des Höhenattributs mit der Höhe des übergeordneten Elements verglichen. kann nur Attribute für Padding-Bottom festlegen. Auf diese Weise müssen Sie nur Iframe-Elemente voller Iframe-Container machen.