使用iframe-resizer时将页面填充到调整后的iFrame顶部

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添加填充。