<!doctype html>

    <html xmlns="http://www.w3.org/1999/xhtml" >

     <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>div仿框架布局</title>

      <style type="text/css">

       * { margin:0; padding:0; list-style:none;}

       html,body { height:100%; overflow:hidden;}

       /*reset panel posotion*/

       .panel{position:absolute;top:0px;right:0px;bottom:0px; left:0px; z-index:1;}

       .top { height:50px; background-color:#ccc;}

       .left { top:50px; bottom:50px; width:200px; background-color:#eee;}

       .main { left:200px; top:50px; bottom:50px;background-color:#f5f5f5;}

       .bottom { top:auto;  height:50px;background-color:#ccc;}

       .panel iframe { width:100%; height:100%;}

        /* class for hide top*/

       .hidetop .top{display:none;}

       .hidetop .left,.hidetop .main{top:0px;}

        /* class for hide bottom*/

       .hidebottom .bottom{display:none;}

       .hidebottom .left,.hidebottom .main{bottom:0px;}

       /*class for hide left*/

       .hideleft .left{display:none;}

       .hideleft .main{left:0px;}

       /* HACK:*IE6/7 _IE6*/

       html { *padding:50px 0px 50px 0px;}

       .panel{*position:relative;}

       .top { *margin-top:-50px; *margin-bottom:0px; }

       .left { *height:100%; *float:left; *top:0px;  }

       .main { *height:100%;  *top:0;*left:0px;_left:-3px;}/*IE 6 float 3px bug*/

        .hidetop{*padding-top:0px;}

        .hidebottom{*padding-bottom:0px;}

        .hideleft{*padding-left:0px;}

      </style>

      <script type="text/javascript">

        function toggleClass(dom,className){

            var reg = new RegExp(className,"g"),

                cn = dom.className,

                newcn= cn.indexOf(className)==-1?(cn+" "+className):cn.replace(reg,"");

            dom.className=newcn;

        }

      </script>

     </head>

     <body>

      <div class="panel top">顶部内容(iframe上scrolling="yes" style="overflow:visible;"防止IE6出现iframe横向滚动条)</div>

      <div class="panel left">

        <input type="button" id="" name="" value="收起/显示上部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hidetop')" />

        <br />

        <input type="button" id="" name="" value="收起/显示左部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hideleft')" />

        <br />

        <input type="button" id="" name="" value="收起/显示下部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hidebottom')" />

      </div>

      <div class="panel main" ><iframe frameborder="0"  scrolling="yes" style="overflow:visible;" src="http://www.baidu.com"></iframe></div>

      <div class="panel bottom">底部内容</div>

     </body>

    </html>

使用div模拟出frameset效果的更多相关文章

  1. 2D图形如何运动模拟出3D效果

    一.先看看实现效果图 (左边的2d图片如何运动出右边3d的效果)                                      引言: 对于这个题目,真的很尴尬,不知道取啥,就想了这个题目 ...

  2. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  3. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  4. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  5. css3 模拟标牌震荡效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  7. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  8. div模拟table，可实现左右高度同增长（html布局）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js单击输入框后弹出提示信息效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. hdwiki 部署

    1.安装wamp 集成环境(部署过程出现的环境问题请搜索我的另外一篇文章 <wamp安装失败原因大全>)2.到 http://kaiyuan.hudong.com/download/ 下载 ...

  2. bzoj3884上帝与集合的正确用法

    Description   根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“ ...

  3. 解题：LNOI 2014 LCA

    题面 这题有点意思 转化问题,我们把询问区间的点到根链加,再查询询问点到根的权值和就是每个询问的答案. 然后如果你数据结构没学傻只需要差分一下就可以扫一遍出解了 #include<cstdio& ...

  4. 解题：HNOI 2014 世界树

    题面 首先建虚树 DFS求虚树上每个点所属的点和到它所属点的距离,然后在=考虑虚树所有的边(对应原树一条链).如果两个端点所属节点不同就倍增出分界点统计答案,否则不用管(之后会统计到的):注意根节点特 ...

  5. 洛谷P3241 开店

    题意:紫妹和幽香是17岁的少女,喜欢可爱的东西. 给定一棵树,有点权,边权.每次求所有权值在[l, r]范围内的点到点x的距离和.强制在线. 解:动态点分治怎么搞啊...... 一开始想的是权值的限制 ...

  6. 监控IIS的运行状态

    IIS经常出现假死的情况,具体什么时候会出现假死,我就不说了,今天我要写的是如何监控IIS的状态. 程序的功能是:如果IIS是为运行的状态,就重启IIS,如果IIS的连接数达到了设置的连接数,也重启I ...

  7. svn:重命名文件之后,不允许提交

    1.错误代码 org.apache.subversion.javahl.ClientException: Illegal target for the requested operation svn: ...

  8. Redis常用命令速查 <第二篇>

    一.Key Key命令速查: 命令 说明 DEL 删除给定的一个或多个 key,不存在的 key 会被忽略,返回值:被删除 key 的数量 DUMP 序列化给定 key,返回被序列化的值,使用 RES ...

  9. RabbitMQ 客户端开发向导

    准备工作:composer 引入 php-amqplib 说明:本文说明基于 Java(主要说明原理),实现使用 php RabbitMQ Java 客户端使用 com.rabbitmq.client ...

  10. Qt error ------ qRegisterMetaType() 跨线程信号与槽的形参携带

    Qt提示: QObject::connect: Cannot queue arguments of type 'FrequencySpectrum' (Make sure 'FrequencySpec ...