如何使用Iron Pages将粘性页脚添加到Polymer Starter Kit

Question

我正在尝试在Polymer Starter Kit中添加粘性页脚.到目前为止我已经尝试过了

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

但似乎都不起作用.

如何在纸质标题面板上添加/设置粘性页脚？

<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

一种方法是使用position:fixed.

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

或者你可以移动它的footer外部paper-header-panel并将它们包裹在垂直堆叠中div.

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

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

请注意,在根目录上,div我习惯fit使其内容填充整个页面并vertical layout垂直堆叠内容.

看到这个plunker.