CSS - material web components implementing with the hero部分

Question

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

模板如下所示：

<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>

我没有太多的css，我从他们的demo复制了page-content的css，并为landing-page-hero添加了css：

body {
  margin:0;
}
.page-content {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
}
.landing-page-hero {
  min-height: 400px;
  height: 45vh;
  width: 100vw;
  background-image: url('/img/hero-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 60%;
  display: flex;
  align-items: center;
  color: $white;
}

由于某些原因，当我有一个包含包装整个页面的id="app"的div元素时，抽屉无法打开。我使用这个div元素来挂载Vue。

所以，如果我删除这个元素，那么这个抽屉就会打开，但只在图像的上方：

​

​

但是，就像我说过的，我需要这个元素来挂载Vue，当我拥有它时，单击menu就看不到drawer了，而且hero不是紧接在toolbar下面的，看起来像是来自drawer的margin-bottom，这会进一步向下推它。

​

​

我怎么才能让它工作呢？那么，我有一个带抽屉的工具栏和紧挨着工具栏下面的英雄部分？

Answer 1

我已经修复了在#app元素上挂载Vue后需要材料包的js问题部分：

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，然后它就起作用了。