用CSS构建iframe效果(转)
http://vision.webidea.com.cn/blog/article.asp?id=113

A.div模拟iframe

div {overflow:auto; height:100px;}

这个是最简单常用的,当div内内容高度超过100px,自动出滚动条。

B.用body模拟一个iframe

html { overflow:hidden; padding:0 0 100px 0;}

body { margin:100px 0 0 150px; height:100%; overflow:auto; border-top:1px solid #000; border-left:1px solid #000; background:#ccc;}

利用html的padding留出空白,和以上效果一样,但意义不一样。

C.用层覆盖在层上,模拟iframe

html { overflow: hidden;}
body {height:100%;padding:0; margin:0; border:0;}
#content {height:100%; overflow:auto; position:relative; z-index:3;}
#head {position:absolute;top:0; right:18px;width:100%; height:100px; z-index:5;border-bottom:1px solid #000;}
#foot {position:absolute; bottom:0; right:18px;width:100%; height:50px;z-index:4; border-top:1px solid #000;}

把head和foot分别浮动在content的顶部和底部,遮住body上下,构造中空的iframe效果,此时滚动条控制的是content。

D.用层覆盖在body上,模拟iframe

html { overflow:hidden;}
body { overflow-y:scroll;}

原理同上,只不过此时滚动条控制的是body。

以上只在IE6下测试通过,只提出一种逻辑理论,还需要更多的兼容和完善,或者某些根本做不到全兼容。
coffee   2005-10-17 23:13:04 评论:0   阅读:1631   引用:0

发表评论>>

署名发表(评论可管理,不必输入下面的姓名)

姓名:

主题:

内容: 最少15个,最长1000个字符

验证码: (如不清楚,请刷新)

是日已过,命亦随减; 如少水鱼,斯有何乐?