Utilisez CSS pour créer des effets iframe_CSS/HTML

Les applications iframe sont très courantes, et il y a deux exigences courantes :
1 Pour obtenir l'effet iframe, il faut apporter une barre de défilement, ce qui permet de gagner beaucoup d'espace.
2. Intégrez une page pour implémenter la liaison de cadres.
S'il n'est pas pratique d'utiliser iframe, vous pouvez avoir les solutions suivantes :
Si nous utilisons la mise en page CSS pour implémenter la première exigence, nous pouvons enregistrer une page et améliorer l'efficacité.
La deuxième exigence peut être obtenue à distance en utilisant xmlhttp.
A. Simuler directement l'iframe
Utiliser les calques comme conteneurs

Copier le code Le code est comme suit :

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Créer un effet iframe avec CSS - 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 id="Créer-un-effet-iframe-avec-CSS">Créer un effet iframe avec CSS</h4> <p>De : <a href="http://homepage.yesky.com/" target="_self">Site Web Tianji Tao Bar</a></p> <p>A. Simulez directement l'iframe et utilisez des calques comme conteneurs </p> <div id="content"> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">Écrivez des menus contextuels hiérarchiques illimités en utilisant uniquement CSS</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">Résumé des paramètres de la barre de défilement du navigateur</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">Introduction à quatre façons d'introduire les feuilles de style CSS</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">Effet de disposition verticale du texte obtenu de deux manières</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">40 exemples de mises en page avancées pour la conception Web</a> ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">Découvrez les normes W3C et Ajax depuis GMail</a></p> </div>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Utiliser le corps Créer un conteneur

Copier le code Le code est le suivant :

html { overflow:hidden; height:100% ; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll background:#f00; 0; position : absolu ; haut : 100 px ; gauche : 100 px ; bas : 0 ; droite : 0 ;}
* corps html { hauteur : 100 %;>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Créer un effet iframe avec CSS - 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> <div id="info"> <h4 style="font-weight:bold; margin-top:0;"> </h4> <p>Créer un effet iframe avec CSS<a href="http://homepage.yesky.com"> </a>De : </p>Site Web Tianji Tao Bar<p></p> </div>A. Simulez directement l'iframe et utilisez le corps comme conteneur<script src="http://www.google-analytics.com/urchin.js" type="text/<a href=" http:>javascript"> </script> <script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.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 id="用CSS构建iframe效果">用CSS构建iframe效果</h4> <p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p> <p>B. 绝对定位模拟iframe，滚动条在外边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.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 id="用CSS构建iframe效果">用CSS构建iframe效果</h4> <p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p> <p>B. 绝对定位模拟iframe，滚动条在里边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在IE6.0和FF1.5环境下测试通过