zoukankan      html  css  js  c++  java
  • iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了。
    完美版Iframe自适应高度====>推荐使用
    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>iframe高度自适应</title> <style> *{margin:0; padding:0;} html,body{height:100%;} .header{width: 100%;height:50px;background: #11c1f3; } .container{padding:0 0 0 200px;overflow: hidden;} .container .main{position:absolute; width:auto; height:auto; top:50px; left:200px; right:0; bottom:0; overflow:hidden;} .container .left{width:200px; height:auto; background:#ef473a; position:absolute; left:0; top:50px; bottom:0; overflow: auto;} </style> </head> <body> <div class="header">顶部导航区域...</div> <div class="container"> <div class="main"> <iframe class="mainFrame" src="http://www.cnblogs.com/leyi" width="100%" height="100%" frameborder="0"></iframe> </div> <div class="left">左侧导航区域...</div> </div> </body> </html>
     table版Iframe自适应高度打造高度自适应的后台布局框架=====> 
    
    <style>
        *{ margin:0; padding:0}
        body, html{ height:100%; width:100%; overflow:hidden;} /*这个高度很重要*/
        #frametable .header{ height:40px; background:#ddd; border-bottom:2px solid #999;}
        #frametable .left{ width:150px; border-right:2px solid #999; background:#ddd; height:100%;}
    </style>
    
    <table id="frametable" cellpadding="0" cellspacing="0" width="100%" height="100%" style=" 100%;">
        <tr>
            <td colspan="2" height="40">
                <div class="header">
                    <!-- header menu -->
                </div>
            </td>
        </tr>
        <tr>
            <td valign="top" width="150" height="100%"> <!--这个高度很重要-->
                <div class="left"><!-- left menu --></div>
            </td>
            <td valign="top" width="100%" height="100%"> <!--这个高度很重要-->
                <iframe id="iframe" name="main" src="http://www.baidu.com" width="100%" allowtransparency="true" width="100%" height="100%" frameborder="0" scrolling="yes" style="overflow:visible;"></iframe>
            </td>
        </tr>
    </table>
        
    
    操作iframe=====>
    
        contentWindow //所有浏览器都支持的
        contentDocument //ie 6 7 不支持
        document.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素节点');
        window.parent  //子frame操作父级页面
        window.parent.document.getElementById('父页面元素节点').style.cssText=..
        window.top //获取最顶层一级页面
        window.top.document.getElementById('最顶层页面元素节点').style.cssText=..
        //防止被嵌套:
        if(window!=window.top){
            window.top.location.href=window.location.href
        }
    
    iframe的传值方式=====>
    1、jsonp
    2、localstorage
    3、postMessage
    

      

      

  • 相关阅读:
    任务栏恢复添加快捷方式(即桌快出现箭头)
    去除桌面快捷方式小箭头
    PHP Warning: date() [function.date]: It is not safe to rely on the system's timezone 转
    坑爹的 mysql error 2003!
    浅谈nvm环境搭建与利用nvm安装nodejs
    本地SVN服务器的搭建(WINDOWS环境)
    DevExpress学习之Gridcontrol
    string 和 StringBuilder 的简单理解!
    关注,被关注!
    C# Using 用法
  • 原文地址:https://www.cnblogs.com/leyi/p/4474528.html
Copyright © 2011-2022 走看看