javascript - polymer 1.1 模板中的纸头面板破损

Question

使用 polymer 1.1，我在 paper-header-panel 方面遇到 2 个问题

1. 我无法让面板下方的内容显示出来
2. 我无法将 height: 2000px; 应用于 div，所以我可以有一个滚动条来产生瀑布效果。

我正在使用https://github.com/PolymerElements/paper-header-panel/blob/master/demo/index.html作为例子。

进行一些故障排除后，div id="mainContainer" 的高度为 0。如果从类中删除 Flex，则应用它的高度。但这打破了滚动瀑布效果。

<dom-module id="custom-paper-header-panel">

  <template>
  <style>
    #foobar {
      height: 2000px;
    }
  </style>

    <paper-header-panel mode="waterfall-tall">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">foo</h1>
        </div>
      </paper-toolbar>
      <div id="foobar">
          <h2>This isn't being shown</h2>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "custom-paper-header-panel"
    });
  </script>
</dom-module>

Answer 1

你的元素看起来不错。该问题可能是由于页面上定义的 custom-paper-header-panel 元素未应用 Height 引起的。

尝试使其适合。

<custom-paper-header-panel class="fit"></custom-paper-header-panel>

查看此plunker一个工作样本。