MDUI
首页
注册

mdui-drawer未显示的时候会挤掉原来页面的空间

zhuchengyang
2020-10-31 21:56:25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
        <meta name="renderer" content="webkit"/>
        <meta name="force-rendering" content="webkit"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
            integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
            crossorigin="anonymous"
        />
        <script
            src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
            integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
            crossorigin="anonymous"
        ></script>
    </head>
    <body class="mdui-theme-primary-orange mdui-theme-accent-teal mdui-drawer-body-left mdui-loaded" style="background-image: url(./img/bg.jpg); background-attachment: fixed; background-size: cover; background-position: center;">
        <div class="mdui-appbar-with-toolbar">
            <div class="mdui-appbar mdui-appbar-fixed"> <!-- 顶部应用栏 -->
                <div class="mdui-toolbar mdui-color-theme">
                    <button mdui-drawer="{target: '#drawer',swipe:true,overlay:true}" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons"></i></button>
                    <span class="mdui-typo-title">Title</span>
                    <div class="mdui-toolbar-spacer"></div>
                    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons mdui-ripple"></i></button>
                    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons mdui-ripple"></i></a>
                    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons mdui-ripple"></i></a>
                </div>
            </div>
        </div>
        <div class="mdui-drawer mdui-color-theme mdui-drawer-close mdui-drawer-full-height" id="drawer" style="margin:10px; padding:10px;"> <!-- 左侧的抽屉式导航栏 -->
            <div class="mdui-list">
                <img    onclick="redirect_author()" class="mdui-ripple mdui-img-fluid mdui-shadow-5" src="./img/head.jpg"/><br/>
                <div class="mdui-list-item mdui-ripple" onclick="redirect_main()">
                    <i class="mdui-icon material-icons"></i>
                    <div class="mdui-list-item-content" style="font-weight:300; font-style:italic;"> Main Page</div>
                </div>
                <div class="mdui-divider"></div>
                
            </div>
        </div>
        <div class="mdui-container">
            <div class="mdui-card">
                <h1>123</h1>
            </div>
        </div>
    </body>
</html>

打开的时候会显示如下(浏览器是Chrome)

resize,m_lfit,w_702,h_0,limit_1

左边的应用栏打开的时候会占有的空间没有被收回,把主页面挤过去了

而且在页面大小改变的时候左边的应用栏会迅速地弹开再关闭

(求解决方案,只要能用就行能用就行感激不尽