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

Question

我正在尝试使用这种技术

填充页面高度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扩展另一个元素时,这称为类型扩展自定义元素.<my-tag>它不需要声明,而是需要使用is=""以下方式声明:

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