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

Question

我正在尝试向 Polymer 初学者工具包添加粘性页脚。到目前为止，我已经尝试过

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

但似乎都不起作用。

如何 add/style 将页脚粘贴到纸张页眉面板？

<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>

笨蛋 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。

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

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

css

web-component

polymer

polymer-1.0