discuz后台用的就是这种结构,用table撑开布局,在table里写div,用于菜单栏目的布局,在主体区域用iframe,作为页面容器。

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< 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代码:

1
2
3
4
5
6
<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


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐