layui table表格高度如何自适应div容器的高度？

页面分了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>

写个方法获取容器高度，渲染table的时候调用

function getContainerH(id) {
    var height = $(id).height()
    return height
}

var table1 = table.render({
    elem: '#test1',
    height: getContainerH('#one')
    ...
})

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/571397
这篇博客你也可以参考下：div中table的宽度超过div的宽度问题
除此之外, 这篇博客: 如何实现div内容的动态渲染中的 div或者table内容的动态渲染 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
div内容动态渲染

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

表格根据elem指定的容器调整大小，高度可设置完height: 'full' ，前提是得把div的高度和宽度要确定好。