table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
discuz后台用的就是这种结构,用table撑开布局,在table里写div,用于菜单栏目的布局,在主体区域用iframe,作为页面容器。html代码:1234567891011121314151617table id="frametable" cellpadding="0" ce
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
更多推荐
所有评论(0)