polymer - 无法获得 100% 的高度以在 polymer 元件中工作

Question

我正在尝试使用这种技术

CSS 100% height layout

填充页面高度100%

最终它失败了，因为 DOM 具有不支持高度标签的自定义标签

例子:

有效

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

splinter

<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%除非您将元素设置为 block 级别，否则将无法工作:

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

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

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

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