<body> <div id="Main"> <h1><span></span></h1> ... <div id = "LeftDiv" style="float:left; width: 20%;display:none;"> <iframe id="left" style="WIDTH: 100%;" name="left" src="a.html" mce_src="a.html" frameborder="0" scrolling="yes"> </iframe> </div> <div id = "RightDiv" style="float:left; width: 80%;display:none;"> <iframe name="right" id="right" style="width: 100%" src="b.html" frameborder="0"> </iframe> </div> ... </div> </body> <mce:script type="text/javascript"><!-- setHeight(); window.onresize = function(){setHeight();} function setHeight(){ var getTotH = document.documentElement.clientHeight; var getTitH = $("#Main > h1").get(0).offsetHeight; var getL = document.getElementById("LeftDiv"); var getR = document.getElementById("RightDiv"); var getLeft = document.getElementById("left"); var getRight = document.getElementById("right"); getL.style.height = getTotH - getTitH -30 + "px"; getR.style.height = getTotH - getTitH -30 + "px"; getLeft.style.height = getTotH - getTitH -30 + "px"; getRight.style.height = getTotH - getTitH -30 + "px"; } // --></mce:script>