HTML页面放大缩小被遮盖导致页面不显示

最新推荐文章于 2023-09-05 16:16:05 发布

皮卡皮卡皮~~

最新推荐文章于 2023-09-05 16:16:05 发布

阅读量1.4k

点赞数 1

分类专栏： HTML Layui

本文链接：https://blog.csdn.net/qq_41910353/article/details/118678739

版权

HTML Layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

可能出现的两种情况单个页面
解决方法
在外层div添加class="layui-card"下一层div添加 class="layui-card-body"再添加如下事件

 $(document).ready(function() { 
	     window.onresize = resizeDiv;
		resizeDiv();
   });
	function resizeDiv(){
		$(".layui-card").css("min-height",window.innerHeight*0.95);
		$(".layui-card").css("margin",window.innerHeight*0.02);
	}

具体参考

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>.....</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="/common/js/jquery.js"></script>
<script src="/thirdlib/layuiadmin/layui/layui.js"></script>
<link rel="stylesheet" href="/thirdlib/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/thirdlib/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-card" style="margin: 15px">
    <div class="layui-tab layui-tab-brief layui-card-body" lay-filter="brief">
        <ul class="layui-tab-title">
            <li id="li_fr0" class="layui-this">...</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe src="heartbeat.html" id="fr0" frameborder="0" width="100%"
                    scrolling="no"></iframe>
            </div>
        </div>
</div>
</div>

<script>
layui.config({
    base : '/thirdlib/layuiadmin/'
}).extend({
    index : 'lib/index'
});

layui.use([ 'index', 'element'], function(index, element)
{
    element.on('tab(brief)', function(data)
    {
        var id = "#fr" + data.index;
        $(id).attr("src", $(id).attr("src"));
    });
    var total = $(window).height();
    var hh = total - 97;
    $("[id^=fr]").css("height", hh + "px");
    element.init();
    $(document).ready(function() { 
	     window.onresize = resizeDiv;
		resizeDiv();
   });
	function resizeDiv(){
		$(".layui-card").css("min-height",window.innerHeight*0.95);
		$(".layui-card").css("margin",window.innerHeight*0.02);
	}
});
</script>
</body>
</html>

菜单页面
解决方法iframe中添加class=“fr”
再添加如下事件

var total = $(window).height();
    var hh = total - 97;
    $("[id^=fr]").css("height", hh + "px");
    element.init();
    
    $(window).resize(function() {
    	var total = $(window).height();
    	var hh = total - 75;
    	$(".fr").css("height", hh + "px");
    	$(".fr").css("width", "100%");
    	 element.init();
    });

具体参考

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="/common/js/jquery.js"></script>
<script src="/thirdlib/layuiadmin/layui/layui.js"></script>
<link rel="stylesheet" href="/thirdlib/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/thirdlib/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-tab layui-tab-brief" lay-filter="brief">
    <ul class="layui-tab-title">
        <li id="li_fr0" class="layui-this">..</li>
        <li id="li_fr1">..</li>
    </ul>
    <div class="layui-tab-content">
        <div class="dczgjifarm layui-tab-item layui-show">
            <iframe componentlabel="dczgjifarm" src="alarm.html" id="fr0" class="fr" frameborder="0" width="100%"
                scrolling="no"></iframe>
        </div>
        <div class="yczgjifarm layui-tab-item ">
            <iframe componentlabel="yczgjifarm" src="alarmRestored.html" id="fr1" class="fr" frameborder="0" width="100%"
                scrolling="no"></iframe>
        </div>
    </div>
</div>
</div>

<script>
layui.config({
    base : '/thirdlib/layuiadmin/'
}).extend({
    index : 'lib/index'
});

layui.use([ 'index', 'element', 'common'], function(index, element, common)
{
	var $ = layui.$;
	var strs = common.getRoleUtil();
	var dev = common.getDevUtil();
	
	if(dev == "CSG")
	{
		if (strs.toString().indexOf($("#fr0").attr("componentlabel")) == -1)
		{
			$(".dczgjifarm").removeClass("layui-show");
			$("#li_fr0").hide();
		}
		
		if (strs.toString().indexOf($("#fr1").attr("componentlabel")) == -1)
		{
			$("#li_fr1").hide();
		}
		else
		{
			if(strs.toString().indexOf($("#fr0").attr("componentlabel")) == -1)
			{
				$("#li_fr1").addClass("layui-this");
				$(".yczgjifarm").addClass("layui-show");
			}
		}
		if ((strs.toString().indexOf($("#fr0").attr("componentlabel")) == -1) && (strs.toString().indexOf($("#fr1").attr("componentlabel")) ==-1))
		{
			$(".layui-fluid").hide();
		}
	}
	
    element.on('tab(brief)', function(data)
    {
        var id = "#fr" + data.index;
        $(id).attr("src", $(id).attr("src"));
    });
    var total = $(window).height();
    var hh = total - 97;
    $("[id^=fr]").css("height", hh + "px");
    element.init();
    
    $(window).resize(function() {
    	var total = $(window).height();
    	var hh = total - 75;
    	$(".fr").css("height", hh + "px");
    	$(".fr").css("width", "100%");
    	 element.init();
    });
});
</script>
</body>
</html>

皮卡皮卡皮~~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML页面放大缩小被遮盖导致页面不显示

可能出现的两种情况单个页面解决方法在外层div添加class="layui-card"下一层div添加 class="layui-card-body"再添加如下事件 $(document).ready(function() { window.onresize = resizeDiv; resizeDiv(); }); function resizeDiv(){ $(".layui-card").css("min-height",window.innerHeight*0.9
复制链接

扫一扫