用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下测试通过,只提出一种逻辑理论,还需要更多的兼容和完善,或者某些根本做不到全兼容。
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
