使用position解决layui的iframe宽高自适应的问题

最新推荐文章于 2025-07-10 16:09:19 发布

原创最新推荐文章于 2025-07-10 16:09:19 发布 · 9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui

文章目录

绝对定位创建tab的解决方式

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

原理：利用绝对定位及宽高百分比样式具体可参看关于定位后对宽高的影响

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .layui-tab-content {
		    padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
		}
		.show-frame {
		    top: 50px!important;
		    /*默认.layui-layout-admin .layui-body {
			    top: 60px;
			    bottom: 44px;
			}*/
		    overflow: hidden;/*消除浏览器最右边的滚动条*/
		}
		.frame {
		    position: absolute;
		    padding: 10px;/*与layui-footer隔开一段距离*/
		    width: 100%;
		    height: 100%;
		}
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header"></div>
        <div class="layui-body show-frame">
            <div lay-filter="demo" class="layui-tab layui-tab-card" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this">欢迎</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show ">
                        <iframe class='frame' frameborder="no" scrolling="no" src="welcome.html"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-footer"></div>
    </div>
</body>
</body>
<script src="../layui.js"></script>
<script>
	1. 引用layui模块
	2. tab添加事件
	3. tab切换事件
<script>
</html>

layui-body默认是绝对定位，上例中没有对layui-body设置宽高的百分比。所以设置了iframe的宽高百分比(如果在layui-body中设置宽高百分比，iframe中就可以不用设置了)。

相对定位没有创建tab的解决方式

html需要的结构

<div class="parent">
	<iframe class='son' frameborder="no" scrolling="no" src="#"></iframe> 
</div>

css样式

.parent {
	position: relative;
	height: 100%;/*高度一定要有，以让包含的iframe标签高度自适应。可以在parent外再包裹一个带高度的div，比如：<div class="layui-body">，layui-body在layui中有默认的高度的值*/
}
.son {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 100%;
	width: 100%;
}

样例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent {
            position: relative;
        }
        .son {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header"></div>
        <div class="layui-body">
            <div class="parent">
            </div>
        </div>
        <div class="layui-footer"></div>
    </div>
</body>
</body>
<script src="../layui.js"></script>
<script>
	$("选择器").find("选择器").click(function() {
		$(".parent").html('<iframe class="son" frameborder="no" scrolling="no" src="你的链接"></iframe>');
    }
<script>
</html>