Polymer 自定义元素填充纸滚动页眉面板内容高度区域

使用聚合物起动器套件，我删除了类

内容

和

铁页

。我正在尝试使我的自定义元素

填充

纸张滚动标题面板的查看端口

如何使自定义元素填充
纸张滚动标题面板
内容区域的高度（如100%），而不使用
px
值进行硬编码

index.html：

  <!-- Main Area -->
  <paper-scroll-header-panel main id="headerPanelMain" class="fit">
    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar">
      <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>    

      <span class="space"></span>

      <!-- Application name -->
      <div class="middle middle-container">
         <div class="app-name"></div>
      </div>

      <!-- Application sub title -->
      <div class="bottom bottom-container">
        <div class="bottom-title">John and Olivia are getting married!</div>
      </div>
    </paper-toolbar>

    <!-- Main Content -->
    <div>
        <section data-route="home">
          <main-content class="focus-target" tabindex="-1"></main-content>
        </section>
    </div>
  </paper-scroll-header-panel>
</paper-drawer-panel>


约翰和奥利维亚要结婚了！


自定义元素：

<dom-module id="main-content">
  <template>
    <style include="iron-flex iron-flex-alignment">
      :host {
        height: 100%;
     }

      #main {
        background: black;
        width: 100%;
        height: 100%;
        background-image: url('../img/main-background.jpg');
        background-position: center;
        background-repeat: no-repeat;
        min-width: 500px;
        min-height: 500px;
      }

    </style>
      <div id="main">
    </div>
  </template>

  <script>
    Polymer({
      is: 'main-content'
    })
  </script>
</dom-module>


：主持人{
身高：100%；
}
#主要{
背景：黑色；
宽度：100%；
身高：100%；
背景图像：url（'../img/main background.jpg'）；
背景位置：中心；
背景重复：无重复；
最小宽度：500px；
最小高度：500px；
}
聚合物({
是：'主要内容'
})

注意：在图片中很难看到，但是在底部有一个白色条，元素应该在那里扩展视口/面板的高度

从更改
中的样式

<style include="iron-flex iron-flex-alignment">
  :host {
    height: 100%;
 }

  #main {
    background: black;
    width: 100%;
    height: 100%;
    background-image: url('../img/main-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    min-width: 500px;
    min-height: 500px;
  }

</style>


：主持人{
身高：100%；
}
#主要{
背景：黑色；
宽度：100%；
身高：100%；
背景图像：url（'../img/main background.jpg'）；
背景位置：中心；
背景重复：无重复；
最小宽度：500px；
最小高度：500px；
}

到


：主持人{
@应用（--布局）；
}
#主要{
背景：黑色；
背景图像：url（'https://cdn.meme.am/instances/65207274.jpg');
背景位置：中心；
背景重复：无重复；
最小宽度：500px；
最小高度：500px；
@应用（--layout-flex）；
}

而对于

<div>
    <section data-route="home">
      <main-content class="focus-target" tabindex="-1"></main-content>
    </section>
</div>    



添加一个类以使其可识别

    <div class="main-content">
        <section data-route="home">
          <main-content class="focus-target" tabindex="-1"></main-content>
        </section>
    </div>    



并将其添加到
标记中，以将样式应用于它，它包含
元素：

<style is="custom-style">
    .main-content,main-content {
      @apply(--layout-fit);
    }
</style>


.主要内容，主要内容{
@应用（--布局配合）；
}

谢谢！我希望我能弄明白。我从没想过要这样做。
<style is="custom-style">
    .main-content,main-content {
      @apply(--layout-fit);
    }
</style>