How to add a sticky footer to a polymer starter kit with iron pages

Question

I am trying to add a sticky footer to the Polymer Starter Kit. So far i tried

header-header bar and sticky footer as well as http://www.jlmiller.guru/jekyll/2015/06/02/sticky-footer.html

but doesn't seem to work.

How do you add / create a sticky footer in the title bar?

<paper-header-panel class="flex"> <paper-toolbar> <div>Paper-Toolbar</div> </paper-toolbar> <div class="content fix fullbleed layout vertical"> <iron-pages attr-for-selected="data-route" id="pages" selected="home"> <section data-route="home" class="layout vertical center"> <paper-material>This is some content for home <br /> <br /> <br /> <br /> </paper-material> <paper-material>This is some other content for home</paper-material> <paper-button id="btn1" raised>Next Iron Page</paper-button> </section> <section data-route="page1" class="layout vertical center"> <paper-material>This is content for Page 1</paper-material> <paper-button raised>Button to move to Home</paper-button> </section> </iron-pages> </div> <!-- content --> <footer> Sticky footer? </footer> </paper-header-panel> 

Plunker http://plnkr.co/edit/wOxCgExdWdJdhhfQ4xBz?p=preview

Answer 1

One way is to use position:fixed .

  <footer style="position:fixed;bottom:0"> Sticky footer? </footer> 

Or you can move the footer outside of the paper-header-panel and wrap both of them in a vertically stacked div .

 <div class="fit vertical layout"> <paper-header-panel class="flex"> ... </paper-header-panel> <footer> Sticky footer? </footer> </div> 

Note that in the root of the div I used fit so that its contents fill the entire page and vertical layout to stack the contents vertically.

See plunker .