Chris May

If you ever work with an IFrame, you will notice that you can't set height=100%.

But, many times you might want to have an IFrame act as if that property had the desired effect.  i.e. If you make your browser window taller, you want the heigh of your IFrame to grow as well.

You can acheive this using the following script:

       function resize_iframe() {
            var myWidth = 0, myHeight = 0;
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
            
            var iNewHeight;
            iNewHeight = parseInt(myHeight)-40;
            document.getElementById("WgipIFrame").style.height = iNewHeight;     
        }

        //-- see if there is already something on the onresize
        var tempOnresize = window.onresize; 
        //-- create our event handler
        window.onresize = function(){ 
            //-- if tempFunc is a function, try to call it
            if (typeof (tempOnresize) == "function"){ 
                try{ 
                    tempOnresize(); 
                } catch(e){} //--- if it errors, don't let it crash our script
            } 
            resize_iframe();
        }

Then you can set the IFrame's onload="resize_iframe();" like this:

<iframe src="x.htm" style="width:100%;" 
  id="WgipIFrame" name="WgipIFrame" 
  onload="resize_iframe();"></iframe>