Wie klebe Fußzeile zu Polymer Starter Kit mit Eisen Seiten hinzufügen

Question

Ich versuche, eine klebrige Fußzeile zum Polymer Starter Kit hinzuzufügen. Bisher habe ich versucht,

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

aber weder zu funktionieren scheint.

Wie füge ich einem Papier-Header-Panel eine klebrige Fußzeile hinzu?

<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

Eine Möglichkeit ist position:fixed zu verwenden.

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

Oder Sie können die footer außerhalb des paper-header-panel und wickeln sie beide in einer vertikal gestapelten div bewegen.

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

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

anzumerken, dass auf der Wurzel div I fit verwendet habe, um seinen Inhalt zu machen, die gesamte Seite füllen und den Inhalt vertical layout vertikal zu stapeln.

Siehe hierzu plunker.