Html CSS-使用hero部分实现抽屉的材质web组件

我第一次开始和一个新项目合作。我正在尝试使用他们的持久抽屉和页面上的英雄部分，在那里我还有一个工具栏

模板如下所示：

<div id="app">
  <aside class="mdc-drawer mdc-drawer--persistent mdc-typography">
    <nav class="mdc-drawer__drawer">
      <header class="mdc-drawer__header">
        <div class="mdc-drawer__header-content">
          Header here
        </div>
      </header>
      <nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
        <a class="mdc-list-item mdc-list-item--activated" href="#">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
        </a>
        <a class="mdc-list-item" href="#">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
        </a>
      </nav>
    </nav>
  </aside>
  <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
    <div class="mdc-toolbar__row">
      <section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
        <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
        <span class="mdc-toolbar__title">Title</span>
      </section>
      <section class="mdc-toolbar__section">
        Section aligns to center.
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
      </section>
    </div>
  </header>
  <div class="page-content">
     <div class="landing-page-hero">
     </div>
  </div>
</div>

由于某种原因，当我有一个

div

元素，该元素带有包装整个页面的

id=“app”

时，抽屉无法打开。我正在使用此

div

元素装载

Vue

因此，如果删除此元素，则抽屉将打开，但仅在图像上方：

但是，正如我所说，我需要这个元素来装载

Vue

，当我拥有它时，

抽屉在单击
菜单时不可见，并且
英雄
不在
工具栏的正下方，看起来他们的
页边距底部是从
抽屉
推下的


我怎样才能做到这一点？因此，我有一个带抽屉的工具栏，工具栏正下方有一个hero部分？
我修复了js问题部分，在将Vue安装到#app元素上后需要材料包：

window.Vue = require('vue');
const app = new Vue({
    el: '#app'
});

window.mdc = require('material-components-web/dist/material-components-web')
window.mdc.autoInit();
require('./material/drawer');

然后在css中，我将#app的
display
设置为
display:flex
，然后它就工作了

window.Vue = require('vue');
const app = new Vue({
    el: '#app'
});

window.mdc = require('material-components-web/dist/material-components-web')
window.mdc.autoInit();
require('./material/drawer');