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

Huckster

Ever tried position:fixed? – Drummer

Thanks @NeilJohnRamal for the suggestion, I did try position:fixed but because it's fixed, when the content is longer than the screen the footer will be on top of the content (hence the fixed property). I was looking for a way to put it at the bottom without overlap. – Huckster

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.

Silver

Thanks! The latter solution /plunker was exactly what I was looking for! – Huckster

(the second solution) do you have a solution for IE11? it doesn't seem to work on that one, other browsers are fine. – Inject

I don't think this will work if your iron page item has vertical scrolling (like a listing of items)... the footer will always show on the bottom. Possibly slot the footer to each iron page item instead – Plosive