使用div模拟出frameset效果 

<!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>

 

posted @ 2014-01-20 16:45  {前端开发}  阅读(568)  评论(0)  编辑  收藏  举报