用div仿框架iframe结构布局的示例代码
2013-05-02 15:15
267 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { *padding:70px 10px;} .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} </style> </head> <body> <div class="top">看,亲爱的,iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法:)办法就在本文中,有兴趣的朋友可以自己摸索。</div> <div class="side"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div class="main"> <iframe frameborder="0" src="http://www.g.cn/"></iframe> </div> <div class="bottom"></div> </body> </html>div仿框架(B/S结构软件界面)方法详解
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
相关文章推荐
- 常用的DIV+CSS网站布局的基本框架结构-完整版
- DIV+CSS布局入门示例(二)写入整体层结构与CSS
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- DIV+CSS布局入门示例(二)写入整体层结构与CSS
- 常用的DIV+CSS网站布局的基本框架结构-完整版
- CSS+DIV网页布局(黄冈网校首页布局)示例代码
- div+css网页布局(示例代码)
- CSS网页实例 利用box-sizing实现div仿框架结构实现代码
- 实用框架(iframe)代码
- div仿框架布局之典型的通栏布局V2
- 脚本控制三行三列自适应高度DIV布局的代码
- DIV+CSS网页另类上下布局的实例代码
- Extjs表单元素实现横向、多列布局,最简单的代码示例
- <转载>div+css布局教程之div+css常见布局结构定义
- Android 实现伸缩布局效果示例代码
- div+css布局的图片连续滚动js实现代码
- 使用代码创建布局的小示例, 相当有用
- 使用WebService构建的C/S代码结构示例
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)