discuz后台用的就是这种结构，用table撑开布局，在table里写div，用于菜单栏目的布局，在主体区域用iframe，作为页面容器。
html代码：
< table id = "frametable" cellpadding = "0" cellspacing = "0" width = "100%" height = "100%" style = "width: 100%;" >
< tr >
< td colspan = "2" height = "40" >
< div class = "header" >
<!-- header menu -->
</ div >
</ td >
</ tr >
< tr >
< td valign = "top" width = "150" height = "100%" > <!--这个高度很重要-->
< div class = "left" > <!-- left menu --> </ div >
</ td >
< td valign = "top" width = "100%" height = "100%" > <!--这个高度很重要-->
< iframe id = "iframe" name = "main" src = "http://www.icaigen.com" width = "100%" allowtransparency = "true" width = "100%" height = "100%" frameborder = "0" scrolling = "yes" style = "overflow:visible;" ></ iframe >
</ td >
</ tr >
</ table >
css代码：
<style>
*{ margin : 0 ; padding : 0 }
body, html{ height : 100% ; width : 100% ; overflow : hidden ;} /*这个高度很重要*/
#frametable .header{ height : 40px ; background : #ddd ; border-bottom : 2px solid #999 ;}
#frametable . left { width : 150px ; border-right : 2px solid #999 ; background : #ddd ; height : 100% ;}
</style>
说明：
① 第一个tr是固定高度，用于顶部的导航菜单，所以无论是td还是里面的div.header,其高度均是固定的，宽度100%，横向填充。
② 第二个tr是自适应屏幕高度的（定义td的高度为100%），但是table布局本身并不是自适应的，所以要给table定义高度为100%。然而这样定义后，实际上table并不是自适应的，原因是table的父body高度并不是默认为整个屏幕的100%，至少chrome浏览器就不是。在样式里，定义body,html的高度为100%，并且overflow:hidden。用overflow是因为给iframe定义了滚动条，如果body再来个滚动条，可能就会有两个滚动条，难看了点。而且，后台管理界面，整屏就可以了，内容都在iframe里。
③ 可以给第二个tr中的第一个td（包含div.left的那个）定义背景，那么就不用给div.left定义背景和高度了，discuz是这么做的。
④ discuz后台框架和上面这个大体一致，细微的区别我也没细看，能用就ok了。
⑤ 兼容ie7及其以上，ie6下没看过，应该可以。webkit内核就不用讲了。
demo : http://www.icaigen.com/Upload/download/frame-demo.html
标签：100%,JS,width,iframe,table,div,height,td From： https://blog.51cto.com/u_1236522/5935486