3

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.

Community
  • 1
  • 1
lazieburd
  • 2,326
  • 2
  • 14
  • 12
  • 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. `Ink!`) and those have always defaulted to `inline: block` (they are instances of `HTMLUnknownElement`). – Scott Miles Apr 02 '14 at 20:42

1 Answers1

7

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

ebidel
  • 23,921
  • 3
  • 63
  • 76
  • 1
    The `
    ` version will utilize the normal UA stylesheet and become `display: block` without the `:host` rule. But if you do not extend from `div` (omit `extends="div"`), then you can use `` syntax and it will default to `display: inline`.
     – Scott Miles Apr 02 '14 at 20:39
  • Using extends="div" and
    worked perfectly. Thanks! I was already using "block" level by using display types of "table", "table-row", and "table-cell" which is described in the link i originally posted
     – lazieburd Apr 02 '14 at 21:31