<!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. 【刷题】BZOJ 2151 种树

    Description A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每个位置都有一个美观度 ...

  2. 学习笔记（two sat）

    关于two sat算法 两篇很好的论文由对称性解2-SAT问题(伍昱), 赵爽 2-sat解法浅析(pdf). 一些题目的题解 poj 3207 poj 3678 poj 3683 poj 3648 ...

  3. 【题解】 luogu 3857 [TJOI2008]彩灯 （线性基）

    luogu3857,懒得复制 Solution: 裸的线性基,往里面添加数,记录添加个数\(sum\),快速幂输出\(2^{sum}\)即可 Code: //It is coded by Ning_M ...

  4. 【BZOJ1227】[SDOI2009]虔诚的墓主人（线段树）

    [BZOJ1227][SDOI2009]虔诚的墓主人(线段树) 题面 BZOJ 洛谷 题解 显然发现答案就是对于每一个空位置,考虑上下左右各有多少棵树,然后就是这四个方向上树的数量中选\(K\)棵出来 ...

  5. 【BZOJ5281】Talent Show（分数规划）

    [BZOJ5281]Talent Show(分数规划) 题面 BZOJ 洛谷 题解 二分答案直接就是裸的分数规划,直接跑背包判断是否可行即可. #include<iostream> #in ...

  6. 洛谷 T28312 相对分子质量【2018 6月月赛 T2】 解题报告

    T28312 「化学」相对分子质量 题目描述 做化学题时,小\(F\)总是里算错相对分子质量,这让他非常苦恼. 小\(F\)找到了你,请你来帮他算一算给定物质的相对分子质量. 如果你没有学过相关内容也 ...

  7. 【洛谷P2696】慈善的约瑟夫

    题解:根据<具体数学>上关于迭代约瑟夫问题性质的总结如下:多次迭代的约瑟夫问题的解具有循环移位性质,且答案最终会收敛到不动点处. 代码如下 #include<bits/stdc++. ...

  8. 界面编程之QT的线程20180731

    /*******************************************************************************************/ 一.为什么需 ...

  9. Centos7搭建SS以及加速配置的操作记录

    部署 Shadowsocks之前,对它做了一个简单的了解,下面先介绍下.一道隐形的墙众所周知,天朝局域网通过 GFW (中国防火墙长城:英文名称Great Firewall of China,简写为G ...

  10. python删除列表元素remove,pop,del

    python删除列表元素 觉得有用的话,欢迎一起讨论相互学习~Follow Me remove 删除单个元素,删除首个符合条件的元素,按值删除,返回值为空 List_remove = [1, 2, 2 ...