<!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. Python:目录和文件的操作模块os.path和OS常用方法

    1.目录和文件的操作模块os.path,在使用之前要先导入:import os.path.它主要有以下几个重要的功能函数: #!/user/bin/python #coding= utf-8 impo ...

  2. 【刷题】LOJ 6006 「网络流 24 题」试题库

    题目描述 假设一个试题库中有 \(n\) 道试题.每道试题都标明了所属类别.同一道题可能有多个类别属性.现要从题库中抽取 \(m\) 道题组成试卷.并要求试卷包含指定类型的试题.试设计一个满足要求的组 ...

  3. C++实用整数快速输入输出模板（C++）

    随便写一点放在这里,以后想蛇皮卡常就很方便啦 蒟蒻太懒了,也就暂时不搞什么封namespace之类的操作了 程序结束时记得flush一下. #include<cstdio> #define ...

  4. 洛谷 P3629 [APIO2010]巡逻 解题报告

    P3629 [APIO2010]巡逻 题目描述 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通 ...

  5. CF1110C Meaningless Operations（构造题）

    这可能是我打那么多次CF比赛时,做出来的最难的一道题了……而且这题也是个绝世好题…… 题目链接:CF原网  洛谷 题目大意:$q$ 组询问,每次给定 $a$ 询问 $\gcd(a\&b,a\o ...

  6. bug找到吐的赶脚

    bug找到吐的赶脚,真**刺激 一.单元测试 设计思路 首先是需要写一个无括号四则运算函数 下面的运算先是运算括号内的数 然后将null后置 全部代码测试,覆盖率92.4% 二.结构优化 uml图 流 ...

  7. 最小化安装k8s

    最小化安装k8s Nick_4438 关注 2018.07.11 10:40* 字数 670 阅读 0评论 0喜欢 0 1.前言 之前写过一篇二进制手工安装k8s的文章,过程复杂,搞了多日才安装成功. ...

  8. excel根据一列关键字将多个表格中所需列合并

    VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) lookup_value要查询的列 table_array第一列是被 ...

  9. 20181105 Timer(慕课网)

    定时任务调度 基于给定的时间点,给定的时间间隔或者给定的执行次数自动执行的任务 Java中的定时调度工具 Timer JDK提供,不许引入 功能简单,能用Timer尽量用 Quartz 需要引入 功能 ...

  10. Hadoop基础--统计商家id的标签数案例分析

    Hadoop基础--统计商家id的标签数案例分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.项目需求 将“temptags.txt”中的数据进行分析,统计出商家id的评论标 ...