<!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. #LOJ2564 SDOI2018 原题识别 主席树

    转载请注明原文地址:http://www.cnblogs.com/LadyLex/p/9057297.html 原题链接: 今天考试考了前天的SDOI考题 天啊我菜爆,只有T2拿了30分 然后考试后半 ...

  2. 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest C（记忆化搜索）

    C题 Problem C Game Map 思路: 之前暴力搜索写了好几发,一直超时,后面看其他人的题解发现要用记忆化搜索..直接暴力搜的话有太多重 复的计算. dist u 表示以u 为起点所能走的 ...

  3. 【BZOJ1055】[HAOI2008]玩具取名（动态规划）

    [BZOJ1055][HAOI2008]玩具取名(动态规划) 题面 BZOJ 洛谷 题解 裸的区间\(dp\),设\(f[i][j][W/I/N/G]\)表示区间\([i,j]\)能否由某个字母替换过 ...

  4. spark性能调优（二） 彻底解密spark的Hash Shuffle

    装载:http://www.cnblogs.com/jcchoiling/p/6431969.html 引言 Spark HashShuffle 是它以前的版本,现在1.6x 版本默应是 Sort-B ...

  5. POJ 2135 Farm Tour （网络流，最小费用最大流）

    POJ 2135 Farm Tour (网络流,最小费用最大流) Description When FJ's friends visit him on the farm, he likes to sh ...

  6. ubuntu14的unity desktop显示异常

    在多用户下,卸载compiz后某个单一用户出现菜单栏和任务栏图标消失的情况. 这时,需要在图形界面下重置compiz $dconf reset -f /org/compiz/ 重启unity $set ...

  7. Python中的requests模块注意事项

    主要是说requests.post()方法, 参数: url :  这就不解释了 data:  如果传入的是字典类型,则字典在发出请求时会自动编码为表单形式,表单形式会将字典中的键和值进行一些操作: ...

  8. nginx 重写URL尾部斜杠

    1. 在URL结尾添加斜杠 在虚拟主机中这么添加一条改写规则: rewrite ^(.*[^/])$ $1/ permanent;或者rewrite ^([/\w-_]*[^/])$ $1/ perm ...

  9. INF文件详解

    安装信息(Setup Information)文件是Windows系统支持的一种安装信息存放文件,一般以INF作为扩展名,因此也叫INF文件.安装信息INF文件与Windows内建的安装服务引擎(AP ...

  10. Java Web之路（二）Servlet之HttpServletResponse和HttpServletRequest

    HttpServletResponse 1.告诉服务器应用使用UTF-8解析文本的两种方式,告诉客户端要使用什么编码 response.setHeader("content-type&quo ...