Question

所以我使用了很棒的iframe-resizer库来调整iFrame的大小并使其保持清晰。

问题是（对于我的生活）我无法弄清楚如何制作iFrame，在调整大小时，在顶部添加一些额外的填充。

发生了什么，是iFrameResizes在某一点并且窗口向上滚动，但iFrame放在固定菜单下面（见下文）。我认为这是因为iFrameResize正在使用完整的窗口大小并且不考虑固定菜单。我不确定如何修复它？

这里的html基本上是

<div style="position:fixed;z-index:99; width:100%">
 <nav class="top-bar"><section>
  <ul><li><a href="http://somelink">top link></li><li><a href="http://somelink">top link></li></ul>
 </section></nav>
</div>
<div style="float:left;width:50%;">left panel with text</div>
<div style="float:right;width:50%;">
  <div>
   <iframe style="border:none;overflow:hidden;" src="http://someurl" width="80%" height="100%" scrolling="no" id="iFrameResizer0"></iframe>
   <script>iFrameResize({log: true, 
        checkOrigin: false,
        enablePublicMethods: true,
    })
   </script>
  </div>
</div>

如果有人可以指导我更改其他参数和/或添加这些额外的填充，这将是非常棒的。

为了记录，我尝试添加额外的margin-top和padding-top，但这不能解决问题。此外，首页加载时，两列的高度应相同，因此这不是一个理想的解决方案。

Answer 1

看一下使用resizeCallback在需要时添加填充。

使用iframe-resizer时填充调整大小的iFrame顶部

1 个答案: