用CSS构建iframe效果

原创 2006年06月08日 20:56:00
iframe应用很普遍,通常的需求有两种:

1. 获取iframe效果,就是带一个滚动条,可以省不少版面。
2. 要嵌一个页面,实现框架链接。

如果不方便使用iframe,可以有如下相应解决方案:

1. 可以使用css布局来实现,即可以少一个页面,也可以提高执行效率。
2. 可以采用xmlhttp远程获取数据。

A. 直接模拟iframe

用层做容器
#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}

效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm

用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:200px 0 0 100px;}
body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%; position:static;}

效果演示:http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm

B. 绝对定位模拟iframe

滚动条在外边
html { overflow:hidden; border:0; height:100%;}
body { overflow:hidden; margin:0; height:100%; position:relative;}
#content { height:100%; position:relative; z-index:1; overflow:auto;}
#head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}
#foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}

效果演示:http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm

滚动条在里边
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}

#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}

#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#ccc; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}

效果演示:http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm

强调一下,standard模式要把body看作是一个容器,基本和div类似,这和传统观念是很不一样。搞清楚了html与body的关系,关于高级布局的很多问题自然迎刃而解。

用CSS构建iframe效果

iframe应用很普遍,通常的需求有两种:1. 获取iframe效果,就是带一个滚动条,可以省不少版面。2. 要嵌一个页面,实现框架链接。如果不方便使用iframe,可以有如下相应解决方案:1. 可以...
  • gqy789
  • gqy789
  • 2007年01月23日 15:54
  • 786

超强,用CSS构建iframe效果

  • zgqtxwd
  • zgqtxwd
  • 2008年04月30日 22:11
  • 169

用div实现的效果二——类似iframe

iframe应用很普遍,通常的需求有两种:  1. 获取iframe效果,就是带一个滚动条,可以省不少版面。  2. 要嵌一个页面,实现框架链接。  如果不方便使用iframe,可以有如下相应解决方案...
  • eduxh
  • eduxh
  • 2007年08月31日 16:17
  • 4449

iframe+js实现页面全屏、淡入淡出切换

index.html Html代码   html>   head>   script   type="text/javascript">   //实现全屏   function Fkey()...
  • sweetyhyh
  • sweetyhyh
  • 2017年05月27日 16:50
  • 1205

iframe在div中如何自适应高度

为了帮助网友解决“iframe在div中如何自适应高度”相关的问题,中国学网通过互联网对“iframe在div中如何自适应高度”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:iframe...
  • killcwd
  • killcwd
  • 2015年12月04日 17:09
  • 3371

“画中画”效果--谈IFRAME标签的使用

作者:秋实    文章来源:天极网页陶吧 纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕...
  • 21aspnet
  • 21aspnet
  • 2004年10月30日 17:44
  • 2307

修改Iframe页面的css 参照这个

 修改Iframe页面的css 参照这个 body { scrollbar-face-color: #eddbb8; scrollbar-highlight-color: #fbebd7; scrol...
  • eduxh
  • eduxh
  • 2007年08月31日 16:22
  • 1339

纯 css 实现 iframe 宽高自适应

从网上找了东西,发现都不适合自己的要求,也有纯css实现的,懒得看,大部分是基于js的,当然我的理念是能不用js就不用(这这是个个人怪癖,其实js也没什么,毕竟现在99%以上的浏览器都支持js了)。于...
  • chinet_bridge
  • chinet_bridge
  • 2011年10月29日 13:31
  • 2032

iframe自适应高度和宽度 全css实现无javascript

  菜单管理>                              >>     height:100%;width:100%;right:0px;border:solid 0px red;" ...
  • okkk
  • okkk
  • 2010年04月28日 11:19
  • 14054

页面引入选择include or iframe?

由于页面有重复的样式,所以,计划采用引用jsp的方式,减少代码量。起初我采用的iframe的方式先写了一个单独的common.jsp页面,然后再每一个功能页引入这个common.jsp页面。起初采用的...
  • u012788601
  • u012788601
  • 2016年10月23日 19:42
  • 1309
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS构建iframe效果
举报原因:
原因补充:

(最多只允许输入30个字)