Polymer 无法获得100%的高度以在聚合物元件中工作

我正在尝试使用这种技术

填写页高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">

---

但是页面不会以静默方式呈现任何内容。

默认情况下，自定义元素是

display:inline

。这意味着

height:100%

将不起作用，除非您将元素块级别设置为：

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

另一个问题是你的声明。当您使用

extends

扩展另一个元素时，这称为。与其声明

，不如使用

is=“”

：

演示：

该

版本将使用普通UA样式表，并在不使用

:host

规则的情况下成为

显示：块

。但是如果您不从

div

（省略

extends=“div”

）扩展，那么您可以使用

语法，它将默认为

display:inline

。使用extends=“div”可以很好地工作。谢谢我已经使用了“块”级别，使用了“表”、“表行”和“表单元格”的显示类型，这在我最初发布的链接fwiw中有描述，“不渲染任何内容”实际上是臭名昭著的“0高度”问题。您的元素已渲染，但正如Eric在下面解释的，它具有错误的显示特征。您应该能够在inspector中看到它的计算高度为0px。这实际上与web组件没有任何关系，您始终可以创建标记名（例如，

Ink！

），并且这些标记名始终默认为

inline:block

（它们是

htmlunknowneelement

的实例）。

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