<!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. ssm 整合 redis（简单教程）

    最后我建议大家使用 Spring StringRedisTemplate 配置,参阅: http://blog.csdn.net/hanjun0612/article/details/78131333 ...

  2. webapi Route 特性

    转载:http://www.th7.cn/Program/net/201410/302571.shtml ASP.NET Web API路由,简单来说,就是把客户端请求映射到对应的Action上的过程 ...

  3. 内置函数enumerate()

    enumerate是枚举的意思,顾名思义,enumerate()函数用来将一个可迭代序列生成一个enumerate对象,该enumerate对象的每个元素是由可迭代对象的索引编号和对应的元素组成的元祖 ...

  4. POJ 3268 Silver Cow Party （最短路径）

    POJ 3268 Silver Cow Party (最短路径) Description One cow from each of N farms (1 ≤ N ≤ 1000) convenientl ...

  5. [IOI2018] werewolf 狼人

    [IOI2018] werewolf 狼人 IOI2018题解 (其实原题强制在线,要用主席树) 代码: 注意: 1.下标从0~n-1 2.kruskal重构树开始有n个节点,tot从n开始,++to ...

  6. C++ new动态数组初始化

    strlen函数是不包括‘\0’的长度的,sizeof计算的结果才包括'\0'的长度: C++ new动态数组初始化void testnew( const char* str ) { if (!str ...

  7. linux查看进程的线程数

    top -H -p $PID  #查看对应进程的那个线程占用CPU过高 1.top -H 手册中说:-H : Threads toggle 加上这个选项启动top,top一行显示一个线程.否则,它一行 ...

  8. 安装Python和Anaconda

    安装Python和Anaconda 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装anaconda anaconda包括了Python的集成开发环境. 1.打开下载的网站 ...

  9. shell脚本中自定义日志记录到文件

    自定义日志函数和前期变量 # adirname - return absolute dirname of given file adirname() { odir=`pwd`; cd `dirname ...

  10. python循环删除列表元素常见错误与正确方法

    python循环删除列表元素 觉得有用的话,欢迎一起讨论相互学习~Follow Me 常见错误 常见错误一:使用固定长度循环删除列表元素 # 使用固定长度循环pop方法删除列表元素 num_list_ ...