不能达到100％的高度以在聚合物元件中工作 [英] cannot get height 100% to work in polymer elements

问题描述

我正在尝试使用这种技术

I'm trying to use this technique

CSS 100％高度布局

填充页面高度100％

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

Ultimately it fails because DOM has custom tags that won't honor height tag

示例:

工程

<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">

但随后页面静默不显示任何内容.

but then page silently doesn't render anything.

推荐答案

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

By default, custom elements are display: inline. This means height:100% won't work unless you make the element block level:

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

另一个问题是您的声明.当您使用extends扩展另一个元素时，这称为类型扩展自定义元素 .除了声明<my-tag>之外，还需要使用is=""声明它:

The other issue is your declaration. When you use extends to extend another element, this is called a type extension custom element. Instead of declaring <my-tag>, it needs to be declared using is="":

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

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

这篇关于不能达到100％的高度以在聚合物元件中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！