Polymer 1.1 模板中的纸头面板破损

Question

对于 polymer 1.1，我有 2 个问题 paper-header-panel

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

我以 https://github.com/PolymerElements/paper-header-panel/blob/master/demo/index.html 为例。

进行一些故障排除后 div id="mainContainer" 高度为 0。如果从 class 中删除 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 引起的。

尝试制作它 fit。

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

请参阅此 plunker 以获取工作示例。

Answer 2

答案：

我认为文档对此并不十分清楚，因为它给出了 大多数 示例，但没有以下属性......但是如果你想要一个完整的 header （这可能是 99% 的时间）你应该使用：

<body class="fullbleed layout vertical">
    <paper-header-panel  class="flex">

Answer 3

我认为这是 Polymer 中的错误。如果页面顶部有 <!DOCTYPE html>，则 Paper-header-panel 不起作用。

尝试删除文档类型声明。它解决了我的问题。

Polymer 1.1 模板中的纸头面板破损

Polymer 1.1 Paper-Header-Panel Breakage in Template

javascript

polymer

paper-elements

polymer-1.0