使用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>
使用div模拟出frameset效果的更多相关文章
- 2D图形如何运动模拟出3D效果
一.先看看实现效果图 (左边的2d图片如何运动出右边3d的效果) 引言: 对于这个题目,真的很尴尬,不知道取啥,就想了这个题目 ...
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- div弹出层的效果带关闭按钮
下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- css3 模拟标牌震荡效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- div模拟table,可实现左右高度同增长(html布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js单击输入框后弹出提示信息效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- IDEA 修改 jdk 版本
3步 一 file--setting 二 file--Project Structure 三 file--Project Structure
- 用call/cc合成所有的控制流结构
用call/cc合成所有的控制流结构 来源 https://www.jianshu.com/p/e860f95cad51 call/cc 是非常.非常特殊的,因为它根本无法用 Lambda 演算定义. ...
- 【刷题】HDU 5869 Different GCD Subarray Query
Problem Description This is a simple problem. The teacher gives Bob a list of problems about GCD (Gr ...
- 洛谷 P2542 [AHOI2005]航线规划 解题报告
P2542 [AHOI2005]航线规划 题目描述 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系--一个巨大的由千百万星球构成的Samuel星系 ...
- 界面编程之QT的线程20180731
/*******************************************************************************************/ 一.为什么需 ...
- git other-误删恢复等
修改未push的最后一次commit 如在commit后发现漏添加的文件或者commit message需要修改,则可以依次执行: git add FILE_UN_STAGED # 将未提交的文件添加 ...
- php session 登录退出验证
login.html 负责收集用户填写的登录信息 <html><head><title></title></head><body> ...
- Java基础-处理json字符串解析案例
Java基础-处理json字符串解析案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名开发人员,想必大家或多或少都有接触到XML文件,XML全称为“extensible ...
- pytho部分命令
python --version查看版本号 pip install XXX 安装模块 pip uninstall XXX 卸载模块
- Spark记录-Scala多线程
Scala多线程 多线程是同时执行多个线程的过程. 它允许您独立执行多个操作.可以通过使用多线程来实现多任务.线程是轻量级的子进程,占用较少的内存.多线程用于在Scala中开发并发应用程序. Scal ...