我正在尝试向 Polymer 初学者工具包添加粘性页脚。到目前为止,我已经尝试过了
core-header-panel and 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>
最佳答案
一种方法是使用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 .
关于css - 如何使用 Iron Pages 向 Polymer Starter Kit 添加粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32162019/