layui 移动端最简布局 

<script>
    function changeFrameHeight() {
        var iframe = document.getElementsByClassName("iframe");
        for (var i = 0; i < iframe.length; i++) {
            iframe[i].height = document.documentElement.clientHeight-75;
        }
       
    }
    window.onload = function () {
        changeFrameHeight();
    }
</script>
<body>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
            <iframe 
                    class="iframe"
                    height="100%"
                    width="100%"
                    src="https://www.baidu.com"
                    scrolling="auto"
                    frameborder="0">
                </iframe>

            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
        </div>
        <ul class="layui-tab-title layer-footer layui-bg-black" style="position: fixed; bottom: 0;width:100%;height:50px">
            <li class="layui-this">首页</li>
            <li>资讯</li>
            <li>兑换</li>
            <li>个人</li>
        </ul>


    </div>
</body>

 

posted @ 2022-05-12 22:47  AnAng  阅读(1635)  评论(0)    收藏  举报