一页缩放问题上有多个iframe

Question

我正在尝试将两个自适应iframes彼此放在一页上。 不幸的是， iframe的内容可以正确调整大小，但是iframe边界的高度没有改变，因此在调整窗口大小时，两个iframe之间的上限会不断增加。 我希望你能明白我的意思。 我该如何避免这种差距？

 function adjustIframes() { $('iframe').each(function() { var $this = $(this), proportion = $this.data('proportion'), w = $this.attr('width'), actual_w = $this.width(); if (!proportion) { proportion = $this.attr('height') / w; $this.data('proportion', proportion); } if (actual_w != w) { $this.css('height', Math.round(actual_w * proportion) + 'px'); } }); } $(window).on('resize load', adjustIframes); 

 iframe { margin: 5px; } 

 <center>TESTTO P</center> <iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Melli/indexRev.html" width="100%"></iframe> <iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html" width="100%"></iframe> <center>TESTBOTTO M</center> 

Answer 1

您需要添加包装器元素以使iframe响应（至少没有JavaScript hack）。

这是一个没有javascript的工作示例（不需要）：

  iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrap { position: relative; padding-bottom: 52.68%; padding-top: 30px; height: 0; overflow: auto; -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY border: solid black 1px; } 

  <center>TESTTO P</center> <div class="wrap"> <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Melli/indexRev.html"></iframe> </div> <div class="wrap"> <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html"></iframe> </div> <center>TESTBOTTO M</center> 

这里唯一要注意的是，您需要知道iframe所需的宽高比。 基本上在这里，我只是将高度除以原始iframe的宽度（= 52.68％），然后将其用于填充hack。

基本上从以下答案中获取有关使iframe响应的信息： https : //stackoverflow.com/a/27836998/900271

Answer 2

IFrame的高度可能会很痛苦，因为iframe内的内容是独立于父级进行布局的，因此您无法真正使用CSS设置样式并获得高度进行调整（如Oke Henrik Skogstream所说）。

如果您不知道iframe内容的高度，则必须使用iframe 内部的javascript对其进行破解。

请参阅此处以获取简单的JavaScript hack： https : //github.com/jcharlesworthuk/reactive.iframes