Iframe nests frameset to realize scroll bars appearing in the entire iframe. How to display all the content according to the height of the page? _html/css_WEB-ITnose

The website I made uses a frameset frame layout, which is divided into upper, middle and lower parts. The content of the upper and lower frames is fixed, but the content of the middle frame is different. I want the entire frame to share a scroll bar, so I use an iframe. In the nested frameset frame, I set the height in the iframe. The content of the page is different, and the height is also different. Is there any way to display all the content of the page? I've been struggling for two days, it's urgent, I'm waiting online! Please help me heroes!

Reply to the discussion (solution)

Dynamically calculate the height of the middle frame, add the upper and lower heights to the

, and assign them to the style.height of the outer iframe.

How to calculate dynamically? Could you please make it clearer?

h = document.documentElement?document.documentElement.offsetHeight:document.body.offsetHeight

Is this the height of the page in the subframe?

It’s strange that two iframes can share a scroll bar

This is My frame layout page, <br> ------------------------------- <br> <br> <br> &lt ;script language="javascript"> <br> function iFrameHeight(iframeID){ <br> var ifm= document.getElementById(iframeID); <br> var subIfm = ifm.contentWindow.document.documentElement.scrollHeight; <br> if(ifm != null && subIfm != null){ <br> ifm.height = subIfm; <br> } <br> } <br> <br> <br> <br> <br> <br> <br> <iframe src="index.html" scrolling="no" name=" frm" id="frm" width="100%" onload="iFrameHeight('frm')"></iframe> <br> This is the page where I introduced the frame layout <p class="sougouAnswer"> This is the middle frame, you Add the fixed heights of the upper and lower frames, and then "px" </p> <p class="sougouAnswer"> They are not two iframes </p> <p class="sougouAnswer"> I added the height of the upper and lower frames, but the page content of the middle frame is different and the height is also different. It's different. I can't get the height of the middle page? </p> <p class="sougouAnswer"> I added the height of the upper and lower frames, but the page content of the middle frame is different, and the height is also different. I can't get the height of the middle page? <br> <br> Didn’t I tell you about dynamic calculation? ? ? </p> <p class="sougouAnswer"> </p> <p class="modified_message"> This post was last edited by net_lover on 2012-09-14 10:54:53 </p> Give you a complete example <br> a.htm <br> <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt; &lt;body&gt;&lt;iframe id=foo src=&quot;frameset.htm&quot;&gt;&lt;/iframe&gt;&lt;/body&gt;&lt;/html&gt;</pre> <br> <br> frameset.htm <br> <pre class='brush:php;toolbar:false;'>&lt;frameset rows=&quot;100,*,100&quot;&gt;&lt;frame src=&quot;top.htm&quot;&gt;&lt;frame src=&quot;middle.htm&quot;&gt;&lt;frame src=&quot;bottom.htm&quot;&gt;&lt;/frameset&gt;</pre> <br> <br> middle.htm <br> <pre class='brush:php;toolbar:false;'>&lt;script&gt;function setHeight(){ h = Math.max(document.documentElement.offsetHeight,document.body.offsetHeight) window.parent.parent.document.getElementById(&quot;foo&quot;).style.height = 100+h+100 + 50+&quot;px&quot;; //为了保证效果，多加50}&lt;/script&gt;&lt;style&gt;html,body{margin:0;padding:0}&lt;/style&gt;&lt;body onload=&quot;setHeight()&quot;&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;</pre> <br> <br> <br> Note that the test should use http method, do not directly say file method test <p class="sougouAnswer"> Give you a complete example <br> a.htm <br> HTML code <br> <br> <br> </p> <br> <title> <br> <br> <br> </title> <br> <br> <iframe id="foo" src="frameset.htm"></iframe> <br> <br> <br> <br> <br> frameset.htm <br> HTML code <br> <frameset rows="100... <br /> <br />Thank you</p><p class=" sougouanswer> Give you a complete example <br> a.htm <br> HTML code <br> <br> <br> <br> <title>&lt ;/title> <br> <br> <br> </title> <br> <br> <iframe id="foo" src="frameset.htm"></iframe> <br> <br> <br> <br> <br> frameset.htm <br> HTML code <br> <frameset rows="100... <br /> <br /> Thank you Pull </p> <p class=" sougouanswer> This post was finally edited by net_lover at 2012-09-14 10:54:53 <br> Give you a complete example <br> a.htm <br> XML/HTML code?1234567891011<title></title> <iframe id="foo" src="frameset.%E2%80%A6%E2%80%A6%20<br%20/>%20<br%20/>%20Used%20you%20code,%20but%20the%20outermost%20scroll%20bar%20in%20IE%20cannot%20be%20controlled%20with%20the%20mouse%20wheel,%20but%20it%20can%20be%20controlled%20in%20Firefox%20and%20Chrome.%20I%20don%E2%80%99t%20know%20why?%20</p>%20<p%20class=" sougouanswer> This post was last edited by net_lover at 2012-09-14 10:54:53 <br> Give you a complete example <br> a.htm <br> XML/HTML code?1234567891011gt ;<title></title> <iframe id="foo" src="frameset.......%20<br%20/>%20<br%20/>%20And%20get%20the%20first%20After%20the%20height%20of%20one%20page,%20the%20height%20of%20the%20first%20page%20is%20still%20maintained%20when%20jumping%20to%20other%20pages.%20I%20added%20the%20code%20to%20get%20the%20height%20in%20the%20jump%20page%20</p>"></iframe></iframe> </frameset> </frameset>