Question

为什么这两个片段不同？第一个代码段按预期工作第二个是body标签内容的副本，放在一个名为my-header的自定义元素中，my-header插入到body标签中

第二个不是使用fullbleed layout vertical来表示body标签的高度。

<!doctype html>
<html>

<head>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
</head>

<body fullbleed layout vertical>

<core-header-panel flex>
    <core-toolbar>
        <div>Hello World!</div>
    </core-toolbar>
    <div class="content">Content goes here...</div>
</core-header-panel>

</body>

</html>

<!doctype html>
<html>

<head>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
    <polymer-element name="my-header" attributes="">
        <template>
            <style>
            </style>
            <core-header-panel flex>
                <core-toolbar>
                    <div>Hello World!</div>
                </core-toolbar>
                <div class="content">Content goes here...</div>
            </core-header-panel>
        </template>
        <script>
            (function () {

                Polymer({
                    // define element prototype here
                });

            })();
        </script>
    </polymer-element>
</head>
<body fullbleed layout vertical>
<my-header></my-header>

</body>

</html>

Answer 1

您只需要为元素和核心标题面板添加高度

  <style>
    :host, core-header-panel {
      height: 100%;
    }
  </style>

<!doctype html>
<html>

<head>
  <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
  <polymer-element name="my-header">

    <template>
      <style>
        :host,
        core-header-panel {
          height: 100%;
        }
      </style>

      <core-header-panel flex>
        <core-toolbar>
          <div>Hello World!</div>
        </core-toolbar>
        <div class="content">Content goes here...</div>
      </core-header-panel>

    </template>

    <script>
      (function() {

        Polymer({
          // define element prototype here
        });

      })();
    </script>
  </polymer-element>
</head>

<body fullbleed layout vertical>

  <my-header></my-header>

</body>

</html>

聚合物芯 - 板 - 面板高度问题

1 个答案: