超强，用CSS构建iframe效果

作者佚名技术来源 CSS编程浏览发布时间 2012-05-26

iframe应用很普遍，通常的需求有两种：

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

如果不方便使用iframe，可以有如下解决方案：

第一种需求如果我们使用css布局来实现，即可以少一个页面，也可以提高效率。
第二种需求可以采用xmlhttp远程获取。

A. 直接模拟iframe

用层做容器

引用:

#content { overflow:auto; height:200px; width:600px; background:#f00;}

效果演示源代码：

* { 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>
</head>

<body>

<h4 style="font-weight:bold;">用CSS构建iframe效果</h4>
<p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p>
<p>A. 直接模拟iframe，用层做容器</p>

<p>·<a class="grey-s" 
href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a><br />
   ·<a 
class="grey-s" 
href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br />
   ·<a 
class="grey-s" 
href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br />
   ·<a 
class="grey-s" 
href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br />
   ·<a 
class="grey-s" 
href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a><br />
    ·<a 
class="grey-s" 
href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>
</div>
</body>
</html>

用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%;}

效果演示源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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 { heig</td> </tr> <tr> <td><p>凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：<a href="http://www.lingzhong.cn">http://www.lingzhong.cn</a> 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!</p> </td> </tr> </table> </div> <div class="page"><a href="31912.htm" class="current">1</a><a href="31912-2.htm">2</a><a href="31912-3.htm">3</a><a href="31912-4.htm">4</a><a href="31912-2.htm">下一页</a><div style="clear:both;"></div></div> <div id="jiathis">  <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <a style="background:none;">分享到：</a> <a class="bds_qzone"></a> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_renren"></a> <a class="bds_baidu"></a> <a class="bds_douban"></a> <a class="bds_kaixin001"></a> <a class="bds_t163"></a> <a class="bds_tsohu"></a> <span class="bds_more">更多</span> <a class="shareCount"></a> </div> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=460515" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours(); </script>  <div style="clear:both;"></div> </div> <div id="likeart"> <div class="liketitle">你可能对下面的文章感兴趣</div> <div class="likebox"> <ul> <li><a href="http://www.lingzhong.cn/tech/39105.htm" title="抠取小孩头上头发的实用技巧" target="_blank">抠取小孩头上头发的实用技巧</a></li> <li><a href="http://www.lingzhong.cn/tech/13370.htm" title="CSS Sprites (CSS图像拼合技术)教程工具" target="_blank">CSS Sprites (CSS图像拼合技术)教程工具</a></li> <li><a href="http://www.lingzhong.cn/tech/16149.htm" title="PHP 5.3 的重要特性:命名空间" target="_blank">PHP 5.3 的重要特性:命名空间</a></li> <li><a href="http://www.lingzhong.cn/tech/46404.htm" title="精简路由配置的VRF通信方法" target="_blank">精简路由配置的VRF通信方法</a></li> <li><a href="http://www.lingzhong.cn/tech/11159.htm" title="云端时代云主机风暴来袭" target="_blank">云端时代云主机风暴来袭</a></li> <li><a href="http://www.lingzhong.cn/tech/42201.htm" title="Java网络编程从入门到精通（11）：使用Netwo***nterface类获得网络接口信息 - 编程入门网" target="_blank">Java网络编程从入门到精通（11）：使用Netwo***nterface类获得网络接口信息 - 编程入门网</a></li> <li><a href="http://www.lingzhong.cn/tech/21709.htm" title="Hashtable和HashMap的区别" target="_blank">Hashtable和HashMap的区别</a></li> <li><a href="http://www.lingzhong.cn/tech/38295.htm" title="Photoshop处理照片为唯美的校园爱情故事片" target="_blank">Photoshop处理照片为唯美的校园爱情故事片</a></li> <li><a href="http://www.lingzhong.cn/tech/36826.htm" title="PhotoShop教程:制作古典花纹艺术字母" target="_blank">PhotoShop教程:制作古典花纹艺术字母</a></li> <li><a href="http://www.lingzhong.cn/tech/15211.htm" title="Fireworks教程：轻松制作水晶小图标" target="_blank">Fireworks教程：轻松制作水晶小图标</a></li> </ul> </div> <div style="clear:both;"></div> </div> <div class="prenext"><span class="pre">上一篇: <a href='http://www.lingzhong.cn/tech/31913.htm'>搞定CSS SPAN和DIV的区别</a></span><span class="next">下一篇: <a href='http://www.lingzhong.cn/tech/31911.htm'>利用CSS控制打印</a></span> <div style="clear:both;"></div> </div>  <div class="comment"> <div class="more"> <a href="http://www.lingzhong.cn/tech/plus/comment/?id=31912">关于超强，用CSS构建iframe效果的所有评论</a> </div>  <div class="list"> <script language="JavaScript" type="text/javascript" src="http://www.lingzhong.cn/tech/plus/comment/js.asp?id=31912"></script> </div>  <div class="post"> <form action="http://www.lingzhong.cn/tech/plus/comment/save.asp" method="post"> <input type="hidden" name="id" value="31912"> <label for="user">昵称</label> <input name="user" type="text" class="input" /> <label for="content">评论内容</label> <textarea name="content" cols="70" rows="6" class="textarea" onfocus="if($('sn').innerHTML.length==0){geturl('http://www.lingzhong.cn/tech/plus/comment/getcode.asp?'+Math.random(),'sn');}">

随机推荐

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁）邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号