ホームページ >ウェブフロントエンド >htmlチュートリアル >iframe はフレームセットをネストして、iframe フレーム全体に表示されるスクロール バーを実現します。ページの高さに応じてすべてのコンテンツを表示するにはどうすればよいですか? _html/css_WEB-ITnose
iframe はフレームセットをネストして、iframe フレーム全体に表示されるスクロール バーを実現します。ページの高さに応じてすべてのコンテンツを表示するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:19:071375ブラウズ
私が作成したウェブサイトはフレームセットのフレームレイアウトを使用しており、上部と下部のフレームの内容は固定されていますが、中央のフレームの内容は全体で共有したいと考えています。スクロールバーなので、iframeのネストを使用します。フレームセットフレームでは、ページのコンテンツが異なり、高さも異なります。ページのすべてのコンテンツを表示する方法はありますか。 2日間悩んでいます、緊急です、オンラインで待っています！英雄たちを助けてください！
ディスカッションへの返信（解決策）
中央のフレームの高さを動的に計算し、上部と下部の高さを
に追加し、それらを外側の iframe の style.height に割り当てます方法動的に計算しますか？もっとわかりやすくしていただけませんか？
h = document.documentElement?document.documentElement.offsetHeight:document.body.offsetHeight
これはサブフレーム内のページの高さですか?
2 つの iframe でスクロール バーを共有できるのはとても奇妙です
eda4b3610e3e856e21f493635108929d
04956236df57183988ca5087d6e33f56 351a2783fb46f1b94b1cad4ca3017236
eb5f059992a0ae0ef16884cb75644e40
37f861bd36cef5b6406eba87d20a5bab6c04bd5ca3fcae76e30b72ad730ca86dこれは私のフレーム レイアウト ページです
------------- ----------------
1a24b17f85e15c83fc29b7760e40bfcb
function iFrameHeight(iframeID){
var ifm= document.getElementById(iframeID); = ifm.contentwindow.documentelement.scrollheight;
if (ifm! = Null && Subifm! = Null) {
iFM.Height = Subifm;
& lt;/head; & gt ;
4547db994f7ad1acb88b412e7193d58b
0a399fa837275d57293c2ad82bccb75c
フレームレイアウトを紹介したページです
これは中央のフレームで、上部の固定高さを追加します一番下、そして +「px」
2 つの iframe ではありません
上下のフレームの高さを追加しましたが、真ん中のフレームのページ内容が異なり、高さも異なります。中ページの高さは？
動的計算についてお話しませんでしたか? ? ?
この投稿は net_lover によって最終編集されました: 2012-09-14 10:54:53
完全な例を示します a.htm
<!DOCTYPE html><html><head><title></title></head> <body><iframe id=foo src="frameset.htm"></iframe></body></html>
Frameset.htm
<frameset rows="100,*,100"><frame src="top.htm"><frame src="middle.htm"><frame src="bottom.htm"></frameset>middle.htm
<script>function setHeight(){ h = Math.max(document.documentElement.offsetHeight,document.body.offsetHeight) window.parent.parent.document.getElementById("foo").style.height = 100+h+100 + 50+"px"; //为了保证效果，多加50}</script><style>html,body{margin:0;padding:0}</style><body onload="setHeight()">foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/> 注意: テストでは http メソッドを使用する必要があります。ファイル メソッド テストとは直接言わないでください
a.htm
HTML コード
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30eタイトル>f1f223f851a617ee937ed5cccf3eb53b
9c3bca370b5104690d9ef395f2c5f8d1
0aecc9d61aa8123a64f6e672e53fb76d065276f04003e4622c4fe6b64f465b88 /html>
Frameset.htm
HTML コード
cac9a98a2f516b2b3d268d1f80337703 0aecc9d61aa8123a64f6e672e53fb76d
73a6ac4ed44ffec12cee46588e518a5e
Frameset.htm
HTML コード
8b9fdf5da614a952f53dd1a2db66e928
あなたのコードを使用しましたが、IEでは一番外側のスクロールバーはマウスホイールで制御できませんが、FirefoxとChromeでは制御できます。なぜですか？
この投稿は net_lover によって最終編集されました: 2012-09-14 10:54:53
;headb2386ffb911b14667cb8f0f91ea547a79c3bca370b5104690d9ef395f2c5f8d1