实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应

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();
        }
    });

转载于:https://www.cnblogs.com/Han39/p/7251204.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值