页面分了4个div容器，如何实现各容器里的layui table表格自适应div的高度和宽度？
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
background-color: #F2F2F2;
height: 100vh;
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: 1fr 1fr;
}
.box>div {
background-color: #D9D9D9;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div id="one">
<table class="layui-hide" id="test1" lay-filter="test1"></table>
</div>
<div id="two">
<table class="layui-hide" id="test2" lay-filter="test2"></table>
</div>
<div id="three">
<table class="layui-hide" id="test3" lay-filter="test3"></table>
</div>
<div id="four">
<table class="layui-hide" id="test4" lay-filter="test4"></table>
</div>
</div>
<script src="../layui/layui.all.js" charset="utf-8"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var laydate = layui.laydate;
var form = layui.form;
var $ = layui.jquery;
var element = layui.element;
//table1 -daiv1
var tableIns = table.render({
elem: '#test1'
,url: './data1_json.php'
,title:'物品明细'
,loading:true
,height:'500' //高度如何自适应div1
,cols: [
[
{field: 'id', title: 'ID', align:'center', width:'10%',style: 'font-size:12px'}
, {field: 'name', title: '名称', align:'center',width:'8%',sort: false,style: 'font-size:12px'}
, {field: 'total', title: '数量', align:'center',width:'5%', sort: false,style: 'font-size:12px'}
}
]
]
, done:function(res,curr,count){
element.render();
}
});
//table3-div3
var tableIns = table.render({
elem: '#test3'
,url: './data3_json.php'
,title:'区域明细'
,loading:true
,height:'500' //高度如何自适应div3
,cols: [
[
{field: 'id', title: 'ID', align:'center', width:'10%',style: 'font-size:12px'}
, {field: 'name', title: '地区', align:'center',width:'8%',sort: false,style: 'font-size:12px'}
, {field: 'total', title: '数量', align:'center',width:'5%', sort: false,style: 'font-size:12px'}
}
]
]
, done:function(res,curr,count){
element.render();
}
});
});
</body>
</html>
