Adaptive Page height

A problem that has plagued me for a long time: I really want to make the menu on the left of a framework (controls or collapsed Li or something else) automatically adapt to browser changes. Because the actual height of the page varies with the resolution. However, I am very sorry.ArticleThere are countless problems, but they basically cannot solve the problem. Basically, there are two types:
1. IFRAME is embedded in the page. If you want the IFRAME to not display a scroll bar, the size is just the same as the page size. This basic method is completed using the document. Body. scrollheight attribute of the page. In fact, I also use IFRAME, because my folding menu is implemented with CSS + Div, and I cannot use the scroll bar. I use an IFRAME to install it. When the menu is too long, IFRAME is used to display the scroll bar. So what I need is the opposite: I want to make the IFRAME size equal to the size of the browser page.
Theoretically, document. Body. clientheight can solve this problem, but it does not actually work.
2. Basically, CSS is used to adapt to the page height. This is not the case here.
Finally, I found the answer on cnblogs:
Http://dflying.cnblogs.com/archive/2006/03/27/360145.aspx
I can't help but sigh again: a long article of one thousand copies is not as good as an original sentence!
MyCode:

< Script Language = " Javascript " >
Function window. onload ()
{
Document. getelementbyid ( " I1 " ). Height = Document.doc umentelement. clientheight;
Document. getelementbyid ( " I1 " ). Width = Document.doc umentelement. clientwidth;
  // Documents. getelementbyid ("I1"). width = 240; // Document. getelementbyid ("I1" ).content#doc ument. Body. scrollheight
}
</ Script >  

Reference: how to control the IFRAME size without displaying the scroll bar

Use JS Code in two ways:

1.

Function window. onload ()
{
Parent.doc ument. All ("I1"). style. Height = Document. Body. scrollheight + 15;
Parent.doc ument. All ("I1"). style. width = Document. Body. scrollwidth + 10;
}

2.

Function window. onload ()
{
Window. resizeTo (document. Body. scrollwidth + 10, document. Body. scrollheight + 10 );
}
</SCRIPT>

Method 1 shows a good result, but it needs to communicate with the home page (parent ......), For users who place the home page and embedded page on different hosts, this is a cross-origin access.

Method 2 is a good method, but because it does not need to communicate with the home page, when the home page shows fast, the JS Code of the embedded page may not work. So I modified method 2:

<Script language = "JavaScript">
VaR times = 0;
Function window. onload (){
Resize = Window. setinterval ("resizenow ();", 1000 );
}

Function resizenow (){
Window. resizeTo (document. Body. scrollwidth + 10, document. Body. scrollheight + 10 );
If (++ times> 10 ){
Clearinterval (resize );
}
}
</SCRIPT>