iframe 跨域高度自适应的解决办法

最新推荐文章于 2021-03-12 18:11:20 发布

weixin_30760895

最新推荐文章于 2021-03-12 18:11:20 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/cjqa/p/6016058.html

版权

 1 <html>
 2 <head>
 3     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
 4     <meta name="apple-mobile-web-app-capable" content="yes">
 5     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 6     <meta name="format-detection" content="telephone=no">
 7     <style>
 8         body{
 9             overflow: hidden;
10             margin-bottom: 0px;
11         }
12     </style>
13 </head> 
14 <body>
15 <iframe src="https://www.baidu.com/" width='100%' height='100%' frameborder='0' name="iframeCont" id="iframeCont" ></iframe>
16 </body>
17 </html>

这是我在一个博客上看到的实现方法，确实很管用，没有用任何的js。但是我是在手机上用，出了一点小问题，有文本框的情况下点击输入法页面高度就停留在半空不能自适应，经过测试，得到一下解决办法：

 1 <style>
 2 body{
 3     position: absolute;
 4     width: 100%;
 5 　 height:100%;
 6     left:0;
 7     top:0;
 8     overflow: hidden;
 9 }
10 #iframeCont{
11     margin-bottom: 0px;
12 }            
13 </style>