How to set the height of a polymer component to 100%

Question

I am new with polymer and I am experimenting a little with it. How can i set my component to full height? This is what i have and for some reason i can't get it to work. It only has the height of his content:

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="reactive-navbar">
    <style>
    div {
        display: block;
        width: 20%;
        height: 100%;
        background-color: #2c3e50;
    }
    </style>
    <template>
        <div>
            <content></content>
        </div>
    </template>
</dom-module>

<script>
Polymer({
    is: "reactive-navbar",
});
</script>

Answer 1

In your index.html file, set style for html tag:

html {
  height: 100%;
}

Answer 2

If you want your Polymer element to be affected by your style instead of your div, you can change that div in your style tag to :host to make your style affect the host https://www.polymer-project.org/1.0/docs/devguide/styling.html

Updated code:

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="reactive-navbar">
    <style>
    :host {
        display: block;
        width: 20%;
        height: 100%;
        background-color: #2c3e50;
    }
    </style>
    <template>
        <content></content>
    </template>
</dom-module>

<script>
Polymer({
    is: "reactive-navbar",
});
</script>