我试图复制静态页脚,如聚合物核心 – 标题面板中的
here所示.
到目前为止,我有一个核心标题面板,由一个页脚和主内容区域组成,具有’fit’属性,因此它会延伸到视口的高度.
<body fullbleed layout vertical>
<core-header-panel flex style="background-color: red;">
<core-toolbar id="mainheader">
Header
</core-toolbar>
<div fit layout vertical>
<div flex style="background-color: yellow;">
...
</div>
<footer style="background-color: green;">
FOOTER
</footer>
</div>
</core-header-panel>
</body>
但是,我有两个问题：
>页脚始终可见,页眉面板仅在主内容区域的“黄色”div上滚动.
>当我最小化窗口时,页脚覆盖主要内容区域中的“黄色”div(如下所示)
我该如何解决这些问题？
更新
其他实现已经从聚合物团队建议更接近解决方案：Erics solution,Robs solution,但它们都没有解决问题1,在代码中页脚位于核心标题面板之外,因此即使在容器中也始终可见页脚上方大于视口.
解决方法
如果您愿意在页脚上设置固定高度,则可以使用CSS的
calc函数计算内容的最小高度.
<style>
core-header-panel {
background: red;
}
#content {
background: yellow;
min-height: calc(100% - 32px /*core-toolbar*/ - 32px /*footer*/);
}
footer {
background: green;
height: 32px;
}
</style>
<core-header-panel>
<core-toolbar>
Header
</core-toolbar>
<div id='content'>
...
</div>
<footer>
FOOTER
</footer>
</core-header-panel>