如何让全高度的drawer打开后不挡住固定的appbar

如题，我要在PC端做一个固定的drawer，我希望布局的样子：

+------------+
|侧| appbar  |
|边|---------|
|栏| content |
|  |         |
|  |         |
+------------+

但是侧边栏却挡住了固定的appbar：

+------------+
|侧|ar       |   <-已被遮挡。
|边|---------|
|栏| content |
|  |         |
|  |         |
+------------+

实例代码：

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../assets/mdui-v0.4.0/css/mdui.min.css"/>
    </head>
    <body class="mdui-drawer-body-left mdui-appbar-with-toolbar">
        <div class="mdui-appbar mdui-appbar-fixed">
            <div class="mdui-toolbar mdui-color-indigo">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
                <div href="javascript:;" class="mdui-typo-title">测试页</div>
                <div class="mdui-toolbar-spacer"></div>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
            </div>
        </div>
        <div class="mdui-drawer mdui-drawer-full-height mdui-color-white">
            <ul class="mdui-list">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">wifi</i>
                    <span class="mdui-list-item-content">无线局域网</span>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">airplanemode_active</i>
                    <span class="mdui-list-item-content">飞行模式</span>
                </li>
          </ul>
        </div>
        <script src="../assets/mdui-v0.4.0/js/mdui.min.js"></script>
    </body>
</html>

功能建议