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

Question

So I am using the awesome iframe-resizer library in order to resize an iFrame and keep it in focus.

The trouble is (for the life of me) I can't figure out how to make the iFrame, when resized, add some additional padding to the top.

What is happening, is that the iFrameResizes at a certain point and the window scrolls up, but the iFrame is placed underneath the fixed menu (see below). I think it is due to the fact that iFrameResize is using the full window size and does not account for the fixed menu. I'm not sure how to repair that?

Here's the html basically

<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>

If anyone could guide me on additional parameters to change and/or add to add this additional padding that would be awesome.

For the record, I tried to add an additional margin-top and padding-top but that did not work to resolve the issue. Also, the two columns should be the same height when the page is first loaded so this isn't an ideal solution.

Answer 1

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