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