Question

使用聚合物入门套件，我删除了课程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>

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

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>

添加一个类以使其可识别

    <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

自定义元素填充纸 - 卷轴 - 标题 - 面板内容高度区域

1 个答案: