How to add sticky footer to Polymer Starter Kit with Iron Pages

Question

I'm trying to add a sticky footer to the Polymer Starter Kit. So far I've tried

core-header-panel and sticky footer and http://www.jlmiller.guru/jekyll/2015/06/02/sticky-footer.html

but neither seem to work.

How do you add/style a sticky footer to a paper-header-panel?

<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 on the root div I have used fit to make its content fill the entire page and vertical layout to stack the content vertically.

See this plunker.