用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的关系,关于高级布局的很多问题自然迎刃而解。

相关文章推荐

用DIV仿iframe框架布局效果

  • 2012年03月21日 13:12
  • 55KB
  • 下载

《HTML & CSS设计与构建网站》书评之-异类的风格,不一样的效果

《HTML & CSS设计与构建网站》书评之异类的风格,不一样的效果 很高兴在此向大家推荐一本制作网页所需要的书籍,它就是《HTML & CSS设计与构建网站》-五星畅销书籍,本书是由(美)达科特(D...

pdf.js使用和JS实现嵌套Iframe页面F11全屏效果

1      Pdf.js使用 generic/web/viewer.html主要是渲染pdf阅读器的样式,而generic/web/viewer.js则是指定打开的pdf文件(当然还有其他功能,不...

用JqueryUI的Dialog+IFrame实现仿模态窗口效果

大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示...

TreeView+Iframe构造左边目录右边详细页面效果

通讯录系统总结:这个通讯录系统的效果是父窗体放两个iframe,左边的iframe里存放的是树型目录,右边iframe里存放的是该目录下的子目录和目录下的所有联系人。当点击左边的树节点时,右边将获得对...

【Servlet】在Servlet3.0中利用ajax达到iframe局部刷新效果,同时避免在Js写过多的HTML代码

Ajax技术已经不算什么新鲜事了,Ajax局部刷新的文章在网上已经应有尽有,但是,这些文章有一个很严重的缺点,就是把查询出来的内容在JS不停地构造HTML内容,再把这些内容放在页面,好像自己的JS构造...

PHP网站使用JavaScript和Iframe简单实现部分刷新效果

本文主要是记录自己寒假作业PHP网站实现加载界面的文章,运行效果如下图所示.主要记录php+html+Apache开发网站的3个功能:(主要是记录,方便以后阅读和其他人学习)         1.如何...

iframe配合JQueryUI dialog实现登录对话框效果

先上图:其实里面的对话框是一个iframe,不把他们做到一个页面中主要方便模块式开发,而且可以带来禁用javascript的时候也能打开编辑界面的效果(当然关闭的时候还需要处理一下): 主要代码:把i...
  • cownew
  • cownew
  • 2011年01月15日 16:47
  • 2102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS构建iframe效果
举报原因:
原因补充:

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