html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jQuery.js"></script>

        <script type="text/javascript" src="js/js.js"></script>

        <style type="text/css">

            /*

             * 设置高度自适应，让在普通分辨率下和大屏分辨下，都能铺满屏。

             1.设置最外层html的 font-size: 12px;

            */

            html,body{font-family: "微软雅黑";font-size: 12px;width: 99%;height: 100%;  min-width: 1340px;  background-color: #04101E;margin: 0 auto;}

            /*

             2.高度用rem单位。

               最外层html的 font-size: 12px;如果div的height是24px，那用24/12=2rem；相当于1rem=12px；

            */

            .div1,.div2,.div3{

                width: 100%;

                height: 18.33rem;

            }

            .div1{background-color:#ff1aaf ;}

            .div2{background-color:#AA86E6 ;}

            .div3{background-color:#189189 ;}

        </style>

    </head>

    <body>

        <div class="div1">撑起div的高度</div>

        <div class="div2">撑起div的高度</div>

        <div class="div3">撑起div的高度</div>

    </body>

</html>

js:

// 放到头部（初始化位置

$(document).ready(function(){

    setHeight();

    $(window).resize(function(){

        setHeight();

    });

})

function setHeight(){

    //alert("12");

    var sWidth=document.documentElement.clientWidth;

    var sHeight=document.documentElement.clientHeight;

    if(sWidth>1366){

        $("html").css("font-size",sWidth/1366*12+"px");

        return;

    }

    if(sHeight>768){

        $("html").css("font-size",sHeight/768*12+"px");

    }

};

一、若使用iframe嵌入页面（跨域），自适应高度。
问题：初始化调用iframeHeight();同域有效。但对于iframe（class="iframeClass"）里嵌入的页面还是无法自适应高度，不在同浏览器或分辨率下，下方出现白色空白。
解决方法：
①.主页面A.html。嵌入页面B.html
②.对A.html里任意一菜单class，统一绑定iframeHeight();。内容区iframe嵌入的页面能够自适应页面高度，空白处消失。内容超出自动出滚动条。
③.隐藏A.html里最外层滚动条。只显示iframe下的滚动条。
④.单位：宽100%，高rem。

$(document).ready(function(){

         $(window).resize(function(){

            iframeHeight();

        });

         iframeHeight();

     });

    function iframeHeight(){

        var sHeight=document.documentElement.clientHeight;

        $(".iframeClass").css("height",(sHeight/12-11.09)+"rem");

    };

    // 获得总可视区域的高度/12-head块占了11.09rem的高

如：

$(document).ready(function(){

        $(document).on("click","#menus a",function(){

               iframeHeight();

           });

           $(window).resize(function(){

            iframeHeight();

        });

         iframeHeight();

    });

二、设置点击某一处，head块隐藏。

var sHeight=document.documentElement.clientHeight;

    $(".iframeClass").css("height",(sHeight-26)/12+"rem");

    // 获得总可视区域的高度-标签页块占了26px的高后，除以12

如：

 $("控制head隐藏按钮").click(function(){

        if($("head块").is(":visible")){

            $("head块").hide();

            $(this).attr("title","显示head块");

            var sHeight=document.documentElement.clientHeight;

            $(".iframeClass").css("height",(sHeight-26)/12+"rem");

        }else{

            $("head块").show();

            $(this).attr("title","隐藏head块");

        //    $(".iframeClass").css("height","41rem");

            iframeHeight();

        }

    });

实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应的更多相关文章

  1. 判断图片加载完成，自适应iframe高度

    在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在androi ...

  2. js获取iframe和父级之间元素，方法、属，获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  3. 8.14 右键自定义菜单 更加iframe 内容高度调整 iframe高度 js定时

    <div class="main_contain" id="z_div" style="position: relative;"> ...

  4. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  5. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  6. （转）iFrame高度自适应

    第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  7. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  8. Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  9. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

  10. JS 中根据iframe子页面自动iframe高度

    注意:为使页面有更好的兼容性,在使用以下代码前,请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

随机推荐

  1. Leetcode Majority Element系列 摩尔投票法

    先看一题,洛谷2397: 题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 [h ...

  2. 在应用中显示的图片很多情况不满足业务需求，我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片，这是我没就需要监听图片加载完成回调，来看看微信小程序怎么实现图片加载完成回调。

    <swiper-item> <image src="{{item.image}}" class="slide-image" mode=&quo ...

  3. arcpy显示指定表的索引属性

    import arcpy feature_class = "c:/data/well.shp" # Create a list of indexes using the ListI ...

  4. strace命令 二

    让我们看一台高负载服务器的 top 结果: top 技巧:运行 top 时,按「1」打开 CPU 列表,按「shift+p」以 CPU 排序. 在本例中大家很容易发现 CPU 主要是被若干个 PHP ...

  5. 设定rsync开机自启动

    1.启用rsync服务systemctl enable rsync 2.打开rsync自己的开关,这个找了好多地方才找到的vi /etc/default/rsyncRSYNC_ENABLE=true

  6. python 设计模式之原型模式 Prototype Pattern

    #引入 例子1: 孙悟空拔下一嘬猴毛,轻轻一吹就会变出好多的孙悟空来. 例子2:寄个快递下面是一个邮寄快递的场景:“给我寄个快递.”顾客说.“寄往什么地方?寄给……?”你问.“和上次差不多一样,只是邮 ...

  7. SpringMVC:HandlerInterceptor log 日志

    springMVC:HandlerInterceptor拦截器添加系统日志(权限校验)代码收藏 - LinkcOne - CSDN博客https://blog.csdn.net/qq_22815337 ...

  8. AndoridSQLite数据库开发基础教程（5）

    AndoridSQLite数据库开发基础教程(5) 创建SQLite数据库 使用SQLiteManager创建数据库的操作步骤如下: (1)双击SQLiteManager工具,弹出SQliteMana ...

  9. ES6深入浅出-13 Proxy 与 Reflect-2.Proxy 代理

    阮一峰http://es6.ruanyifeng.com/#docs/proxy MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ...

  10. 中标麒麟QT5编译出现：cannot find -lGL 和 collect2:error:ld returned 1 exit status 错误

    sudo yum install mesa-libGL-devel mesa-libGLU-devel