Question

我知道问题可能与没有高度的core-header-pannel父级有关。

重要提示：如果其父级没有高度，则不会显示核心标题面板。

这很好用：

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

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

<body unresolved>
   <core-header-panel>
      <div class="core-header">standard</div>
      <div class="content"></div>
   </core-header-panel>
</body>

但是，当我尝试将core-header-pannel更改为模式＆＃34; waterfall-tall＆＃34;时，标题面板不会显示。

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

    core-header-panel.tall{
        height: 100%;
    }       
</style>    

<core-header-panel mode = "waterfall-tall">
   <div class="core-header">waterfall-tall</div>
   <div class="content"></div>
</core-header-panel>

在我的实验期间＆＃34;我引用了https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel和https://www.polymer-project.org/components/core-header-panel/demo.html

在查看各种StackOverflow问题后，我认为body现在覆盖了header-pannel，因为我不再明确设置高度。仅供参考，我是HTML和Web开发的新手。任何建议，将不胜感激。

要明确，我的问题是：

core-header-panel的父元素是body正确吗？
我是否正确引用了<core-header-panel mode = "waterfall-tall">部分中的<style>？
如何才能显示此darn标题面板？

更新修改

好的，我通过core-header-panel的demo.html实验找到了解决方案。它在我的本地主机上工作正常，即标题崩溃并扩展我期望它应该如何。但是，当我粘贴到jsbin中时，我没有得到我想要的折叠效果。

http://jsbin.com/cufefi/1/edit

我认为这是由于在px部分使用了<style>，但我不确定。

另一个问题：我的导入是相对的，那么jsbin如何解决导入？

第二次更新修改

无论是否使用导入，行为都是相同的，这意味着我没有解析导入，这就是与本地主机上的行为相比，行为不同的原因。

Answer 1

在这里你失去了＆lt;身体＆gt;标记，就在core-header-panel标记之前。这可能是错误吗？

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

    core-header-panel.tall{
        height: 100%;
    }       
</style>    

<core-header-panel mode = "waterfall-tall">
   <div class="core-header">waterfall-tall</div>
   <div class="content"></div>
</core-header-panel>

core-header-panel“瀑布式”聚合物不会出现

1 个答案: