使用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/ ...
随机推荐
- 年度编程语言最佳候选人:Kotlin vs. C
转瞬之间,今年已进入为期不足一个月的倒计时模式.在编程语言界,谁将问鼎 2017 年度编程语言?诸多开发者众说纷纭,有人说是最近风头正盛且被纳入中国高考科目的 Python.有人认为还是老牌常青藤 J ...
- PHP使用serialize和json_encode序列化数据并通过redis缓存文件和$GLOGALS缓存资源对象
PHP常用缓存方式:第一种,把需要缓存的数据进行处理,形成PHP可以直接执行的文件.在需要缓存数据的时候,通过include方式引入,并使用.第二种,把需要的数据通过serialize函数序列化后直接 ...
- NOIP2017 列队——动态开点线段树
Description: Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n×m名学生,方阵的行数为 ...
- HTTP 返回的状态码 != 200 ,浏览器不会将返回的内容缓存到本地磁盘上
今天无意发现的,以前处理HTTP State = 404或403之类的,都是直接返回 HTTP 200 OK,然后加一个缓存设置,例如: Cache-Control: max-age=3600 最近修 ...
- RAC手动中断订阅
__block RACDisposable* dispose = [[RACObserve(self, price) skip:1]subscribeNext:^(NSNumber* x) { [di ...
- js实现表单提交submit(),onsubmit
通常表单的提交有两种方式,一是直接通过html的form提交,代码如下: <form action="" method="" id="forms ...
- Java迭代器用法
public class Test01 { public static void main(String[] args) { List list = new ArrayList(); list.add ...
- spring中bean配置和注入场景分析
bean与spring容器的关系 Bean配置信息定义了Bean的实现及依赖关系,Spring容器根据各种形式的Bean配置信息在容器内部建立Bean定义注册表,然后根据注册表加载.实例化Bean,并 ...
- 关于Cookie跨域的问题
Cookie是一个伟大的发明,它允许Web开发者保留他们的用户的登录状态.但是当你的站点有一个以上的域名时就会出现问题了.在Cookie规范上说,一个cookie只能用于一个域名,不能够发给其它的域名 ...
- 第13月第10天 swift3.0
1. Type 'Any' has no subscript members 这一条简直莫名其妙.大体意思就是,你这个类型"Any"不是个数组或者字典,不能按照下标取东西. 我之前 ...