Use CSS to build iframe effect code_Experience exchange

iframe applications are very common, and there are two common requirements:

1. To obtain the iframe effect, it is to bring a scroll bar, which can save a lot of space.
2. Embed a page to implement frame linking.

If it is not convenient to use iframe, you can have the following solutions:

If we use css layout to implement the first requirement, we can save one page and improve efficiency.
The second requirement can be obtained remotely using xmlhttp.

A. Directly simulate iframe

Use layers as containers
#content { overflow:auto; height:200px; width:600px; background:#f00;}

Effect demonstration source code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Use CSS to build iframe effect - Css Iframe - RexSong.com</title> <style> * {font:12px Arial;} html { overflow:hidden; border:0; height:100%;} body { overflow:hidden; height:100%;} #content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;} </style> <h4 style="font-weight:bold;">Use CSS to build iframe effect</h4> <p>From: <a href="http://www.webjx.com/" target="_self">Webpage Teaching Network</a></p> <p>A. Directly simulate iframe and use layers as containers</p> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">Write unlimited hierarchical pop-up menus using only css</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">Summary of browser scroll bar parameters</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">Introduction to four ways to introduce css style sheets</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">Text vertical arrangement effect achieved in two ways</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">40 examples of advanced layout in web design</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">Understand W3C standards and Ajax from GMail</a></p> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}
效果演示源代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title> <style> * { font:12px Arial;} 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;} #info { position:fixed; top:10px; left:10px;} * html #info { position:absolute;} </style> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script><div id="info"> <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> <p>来自：<a href="http://www.webjx.com">网页教学网</a></p> <p>A. 直接模拟iframe，用body做容器</p> </div> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

B. 绝对定位模拟iframe

滚动条在外边

复制代码 代码如下:

html { overflow:hidden; border:0; height:100%; max-height:100%;} 
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;} 
#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;} 
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;} 
#content { height:100%; position:relative; z-index:1; overflow:auto;} 

效果代码演示

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title> <style> * { font:12px Arial;} 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;} </style> <script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script><div id="head"> <div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;"> <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> <p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p> <p>B. 绝对定位模拟iframe，滚动条在外边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> </div>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

滚动条在里边

复制代码 代码如下:

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:#f00; z-index:5;} 
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;} 

效果演示代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title> <style type="text/css"> * { font:12px Arial;} 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;} </style> <script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script><div id="head"> <div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;"> <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> <p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p> <p>B. 绝对定位模拟iframe，滚动条在里边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">Write unlimited hierarchical pop-up menus using only css</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">Summary of browser scroll bar parameters</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">Introduction to four ways to introduce css style sheets</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">Text vertical arrangement effect achieved in two ways</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">40 examples of advanced layout in web design</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">Understand W3C standards and Ajax from GMail</a></p> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]