table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)

写的不错,所以转载了。

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内核就不用讲了。




©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值