cannot get height 100% to work in polymer elements

Question

I'm trying to use this technique

CSS 100% height layout

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.

Answer 1

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