0

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

问题是（对我来说）我不知道如何制作 iFrame，在调整大小时，在顶部添加一些额外的填充。

发生的事情是 iFrame 在某个点重新调整大小并且窗口向上滚动，但 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 但这并不能解决问题。此外，第一次加载页面时，两列的高度应该相同，因此这不是一个理想的解决方案。

4

1 回答 1

0

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

于 2016-02-10T21:41:47.223 回答