自定义元素填充paper-scroll-header-panel内容高度区域

Question

使用聚合物入门套件，我删除了 class content 和 iron-pages。我试图让我的自定义元素 <main-content> 填充 paper-scroll-header-panel 的视口。

如何让自定义元素填充 paper-scroll-header-panel 内容区域 的高度（例如 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>

注意：在图片中很难看到，但在底部有一个白色条，元素应该在其中扩展viewport/panel[的高度=19=]

Answer 1

将 <dom-module id="main-content"> 中的样式更改为

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

到

<style include="iron-flex iron-flex-alignment">
  :host {
    @apply(--layout);
  }

  #main {
    background: black;
    background-image: url('https://cdn.meme.am/instances/65207274.jpg');
    background-position: center;
    background-repeat: no-repeat;
    min-width: 500px;
    min-height: 500px;
    @apply(--layout-flex);
  }

</style>

以及

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

添加一个 class 使其易于识别

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

并将其添加到 <head> 标签以对其应用样式，它包含 <main-content> 元素：

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

Plunker example

自定义元素填充paper-scroll-header-panel内容高度区域

Custom element fill paper-scroll-header-panel content height area

polymer

polymer-1.0