iframe 跨域高度自适应的解决办法
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>