右侧采用了卡片格式：

 

 代码如下：

html：

<body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div><iframe src="head.html" width="100%"  height="100%" frameborder="0" scrolling="no" marginheight="0"></iframe></div>
            <!--2.左侧导航-->
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item leftdaohang" data-url="jiaose.html" mytitle="角色管理"><a>角色管理</a></li>
                        <li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="账号管理"><a>账号管理</a></li>
                    </ul>
                </div>
            </div>
            <!--3.右侧主体内容区-->
            <div class="layui-body">
                <!--tabs标签-->
                <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowclose="true">
                    <ul class="layui-tab-title">
                    </ul>
                    <div class="layui-tab-content">
                    </div>
                </div>
            </div>

            <!--4.底部固定区域-->
            <div class="layui-footer">
                <!-- 底部固定区域 -->
                ©赵墨涵的数据共享平台
            </div>
        </div>

js：

<script>
            layui.use('element', function() {
                var $ = layui.jquery,
                    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
                //触发事件
                var active = {
                    tabAdd: function() {
                        //新增一个Tab项
                        var htmlurl = $(this).attr('data-url');
                        var mytitle = $(this).attr('mytitle');
                        //                  alert("触发tab增加事件："+mytitle);
                        //先判断是否已经有了tab
                        var arrayObj = new Array(); //创建一个数组  
                        $(".layui-tab-title").find('li').each(function() {
                            var y = $(this).attr("lay-id");
                            arrayObj.push(y);
                        });
                        //                    alert("遍历取到的数组："+arrayObj);
                        var have = $.inArray(mytitle, arrayObj); //返回 3,
                        if (have >= 0) {
                            //tab已有标签
                            //                        alert("遍历的已有标签："+mytitle);
                            element.tabChange('demo', mytitle); //切换到当前点击的页面
                        } else {
                            //没有相同tab
                            //                      alert("遍历的没有相同tab："+mytitle);
                            element.tabAdd('demo', {
                                title: mytitle //用于演示
                                    ,
                                content: '<iframe style="width: 100%;height:100%;" frameborder="0" scrolling="yes" src=' + htmlurl +
                                    ' ></iframe>',
                                id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
                            })

                            element.tabChange('demo', mytitle); //切换到当前点击的页面
                            FrameWH(); //计算框架高度
                        }
                    }

                };
                function FrameWH() {
                    var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                    $("iframe").css("height", h + "px");
                }

                $(window).resize(function() {
                    FrameWH();
                })

                $(".leftdaohang").click(function() {
                    var type = "tabAdd";
                    var othis = $(this);
                    //                var htmlurl=$(this).attr('data-url');
                    //                var mytitle=$(this).attr('mytitle');
                    active[type] ? active[type].call(this, othis) : '';
                });

            });
        </script>

标红的代码为解决

layui tab iframe 自适应高度

参考链接：https://blog.csdn.net/qq_28761593/article/details/105702609