JS来控制div高度的自适应，html中有多个div，div需要根据屏幕和浏览器的高度实现高度的自动变化，div嵌套的有 iframe ，iframe用来展示网络资源内容。
其主要JS代码如下:
function resizeHeight(id,size){
var ele = document.getElementById(id);
var width = ele.offsetWidth;
ele.style.height = size*width+"px";
}
resizeHeight("autoDiv",0.45);
完整的代码如下，依赖于layui的相关样式。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>题目识别后台管理系统</title>
<script src="../js/layuicommon.js"></script>
</head>
<body class="layui-layout-body">
<div id="main" class="layui-layout layui-layout-admin">
<ul id="menu" class="layui-nav" lay-filter="contentnav">
<li class="layui-nav-item layui-this" onclick="refresh();"><a >首页</a></li>
<li id="d1" class="layui-nav-item">
<a data-text="d1" href="javascript:;">题库管理</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a data-text="d1" href="/web/addquestion" target="mainFrame" style="font-size:10px">添加题目</a></dd>
<dd><a data-text="d1" href="/web/getquestion" target="mainFrame" style="font-size:10px">修改题目</a></dd>
<dd><a data-text="d1" href="/web/getquestion" target="mainFrame" style="font-size:10px">删除题目</a></dd>
</dl>
</li>
<li id="d2" class="layui-nav-item">
<a data-text="d2" href="javascript:;">用户管理</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a data-text="d2" href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">添加用户</a></dd>
<dd><a data-text="d2" href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">修改用户</a></dd>
<dd><a data-text="d2" href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">删除用户</a></dd>
</dl>
</li>
<li id="d3" class="layui-nav-item layui-layout-right">
<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img" th:text="${username}"></a>
<dl class="layui-nav-child">
<dd><a href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">修改信息</a></dd>
<dd><a href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">安全管理</a></dd>
<dd><a href="${path}/sys/user/modifypwd" target="mainFrame" style="font-size:10px">退出系统</a></dd>
</dl>
</li>
</ul>
<div id="autoDiv" class="" style=" padding: 15px;margin-bottom: 10px; background-color: rgba(221, 221, 221, 0.16);" >
<iframe class="layadmin-iframe" id="mainFrame" name="mainFrame" src="/web/searchquestion" style="overflow:visible;width:100%;" frameborder="no"></iframe>
</div>
<div class="layui-footer" >
<!-- 底部固定区域 -->
<p align="center"> xx 集团科技有限公司 ©Copyright 2020 </p>
</div>
</div>
<script>
var elId,curentId,es;
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element,
$ = layui.jquery;
// 绑定菜单单击事件
// elId=this.getElementsByClassName("layui-nav-item").item(0).id;
//elId=es(this).getById;
//监听导航点击
element.on('nav(contentnav)', function(elem){
/*var id = elem.attr('data-id');
var url = elem.attr('data-url');
var text = elem.attr('data-text');
console.log("测试数据2:"+id);
console.log("测试数据2:"+url);
console.log("测试数据2:"+text);*/
curentId=document.getElementsByClassName("layui-this").item(0).id;
elId=elem.attr('data-text');
if (elId=="d1"){
if (curentId=="d2"){
$("#d2").removeClass("layui-this");
}
$("#d1").addClass("layui-this");
console.log("id1:"+curentId);
console.log("id1:"+elId);
}
if (elId=="d2") {
if (curentId=="d1") {
$("#d1").removeClass("layui-this");
}
$("#d2").addClass("layui-this");
console.log("id2:"+curentId);
console.log("id2:"+elId);
}
return false;
});
});
function getElementId(id) {
console.log("点击事件执行");
elId=id;
}
function refresh() {
history.go(0);
}
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
function resizeHeight(id,size){
var ele = document.getElementById(id);
var width = ele.offsetWidth;
ele.style.height = size*width+"px";
}
resizeHeight("autoDiv",0.45);
</script>
</body>
</html>
