Come aggiungere footer sticky al Polymer Starter Kit con Iron Pages

Question

Sto provando ad aggiungere un footer sticky al Polymer Starter Kit. Finora ho provato

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

ma nessuno dei due sembra funzionare.

Come si aggiunge/stile un piè di pagina appiccicoso a un pannello di intestazione della carta?

<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

Un modo è quello di utilizzare position:fixed.

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

Oppure si può spostare il footer al di fuori del paper-header-panel e avvolgere ciascuno di essi in una impilati verticalmente div.

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

    <footer> 
    Sticky footer? 
    </footer> 
</div> 

Si noti che sulla radice div ho usato fit a fare il suo contenuto di riempire l'intera pagina e vertical layout per impilare il contenuto in senso verticale.

Vedere questo plunker.