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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章