cannot get height 100% to work in polymer elements

Question

I'm trying to use this technique

to fill page height 100%

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

Example:

Works

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

Broken

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

I tried using

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

but then page silently doesn't render anything.

Fwiw, "doesn't render anything" is actually the infamous "0-height" problem. Your element is rendered, but as Eric explains below it has wrong display characteristics. You should be able to see in inspector that it has a computed height of 0px. This doesn't really have anything to do with web components, you can always make up tag names (e.g. <squid>Ink!</squid>) and those have always defaulted to inline: block (they are instances of HTMLUnknownElement). — Scott Miles

ebidel ebidel · Accepted Answer · 2014-04-02T20:35:01

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%;
}

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>

Demo: http://jsbin.com/bohumisa/1/edit

cannot get height 100% to work in polymer elements

1 Answers