• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!
首页 > IT技术 > DIV+CSS > 内容

table+div+iframe打造高度自适应的后台框架

2015-06-10 22:50:35   来源:叶景网络
    table+div+iframe打造高度自适应的后台
    ① 第一个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内核就不用讲了。
    代码如下:
    <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>
上一篇:第一页
下一篇:推荐一款tab切换js+css
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
table+div+iframe打造高度自适应的后台框架 table+div+iframe打
HTML页面CSS书写规范 HTML页面CSS书写规范
CSS中一种简单的方法让文字与图片平行 CSS中一种简单的方
CSS兼容IE6问题汇总 CSS兼容IE6问题汇总
关注排行RANKING
1

table+div+iframe打造高度自适应的后台框架

table+div+iframe打造高度自适应的后台框架 第一个tr是固定高度,用于顶部的导航菜单,所以无论是td还是里面的div header,其高度...

2

HTML页面CSS书写规范

HTML页面CSS书写规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、...

3

CSS中一种简单的方法让文字与图片平行

CSS中一种简单的方法让文字与图片平行 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

4

CSS兼容IE6问题汇总

CSS兼容IE6问题汇总 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

5

DIV+CSS图片和文字如何显示同一行

DIV+CSS图片和文字如何显示同一行 需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical-align: midd...

6

关于IE中18px的默认行高

关于IE中18px的默认行高 在IE中定义height时,如果值小于18px的默认行高时,得到的结果总是18px的高,这...

7

DIV CSS 网页兼容全搞定 (IE6 ...

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌) 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。

8

常用的CSS命名规范

常用的CSS命名规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

9

DIV+CSS浏览器兼容模式

DIV+CSS浏览器兼容模式 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行...