核心头部面板和粘滞页脚 [英] core-header-panel and sticky footer
问题描述
我试图复制静态页脚，如图所示， Robs解决方案，但是他们都没有解决问题1，在代码中，页脚位于核心页眉面板之外，因此即使在容器
将页脚移到标题面板的主要内容区域，并弯曲上面的内容也不起作用。
http://jsbin.com/ vopahu / 1 / edit？html，输出
您可以使用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>
标题
< / core-toolbar>
< div id ='content'>
...
< / div>
< footer>
FOOTER
< / footer>
< / core-header-panel>
http://jsbin.com/boyiwumigo/1/edit
I'm trying to replicate the static footer as shown here in a polymer core-header-panel.
So far I have a core-header-panel consisting of a footer and main content area with the 'fit' attribute so it stretches to the height of the viewport.
<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>
However, I have two issues:
- The footer is always visible, the header panel only scrolls on the 'yellow' div in the main content area.
- When I minimize the window the footer overlays the 'yellow' div in the main content area (shown below)
How can I resolve these issues?
Update
Other implementations have been suggested from the polymer team which get closer to the solution: Erics solution, Robs solution, however neither of them solve issue 1, in the code the footer is outside the core-header-panel and therefore is always visible even when the container above the footer is larger than the viewport.
Moving the footer to within the header panel main content area and flexing the content above it doesn't work either.
http://jsbin.com/vopahu/1/edit?html,output
You can use CSS's calc function to calculate the min-height for your content, if you're willing to set a fixed height on your footer.
<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>
http://jsbin.com/boyiwumigo/1/edit
这篇关于核心头部面板和粘滞页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
