zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    重载运算符强化2-返回值
    重载运算符强化--返回值
    重载运算符
    有名对象,匿名对象
    自定义jsp标签
    XML的解析
    DTD概述
    HashTable和HashMap区别
    同步与异步的概念
    List集合
  • 原文地址:https://www.cnblogs.com/cjqa/p/6016058.html
Copyright © 2011-2022 走看看