不能使高度100％在聚合物元素中起作用

Question

我试图使用这种技术

CSS 100% height layout

填充页面高度100％

最终它失败了，因为DOM有自定义标签，不会荣誉高度标签

示例：

作品

<div style="height:100%">
  ok here
  <div style="height:100%">
    <!-- WORKS: takes full browser height -->
  </div>
</div>

断

<div style="height:100%">
  ok here
  <my-tag style="height:100%">
    <!-- BROKEN : takes minimal browser height -->
  </my-tag>
</div>

我尝试使用

<polymer-element name="my-tag" extends="div">

然后页面默默地不呈现任何内容。

Answer 1

默认情况下，自定义元素为display: inline。这意味着height:100%除非您将元素块设为级别，否则不会起作用：

:host {
  display: block;
  height: 100%;
}

另一个问题是你的声明。当您使用extends扩展另一个元素时，这称为type extension custom element。它不需要声明<my-tag>，而是需要使用is=""声明：

<div is="my-tag"></div>

演示：http://jsbin.com/bohumisa/1/edit