0

そのため、iFrame のサイズを変更してフォーカスを維持するために、素晴らしいiframe-resizerライブラリを使用しています。

問題は、（私の人生にとって）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 を追加しようとしましたが、問題を解決できませんでした。また、ページが最初にロードされるとき、2 つの列は同じ高さでなければならないため、これは理想的なソリューションではありません。

4

1 に答える 1

0

必要に応じて resizeCallback を使用してパディングを追加する方法をご覧ください。

于 2016-02-10T21:41:47.223 に答える