Polymer 核心页眉面板和粘性页脚_Polymer_Flexbox

Polymer 核心页眉面板和粘性页脚

polymer

Polymer 核心页眉面板和粘性页脚,polymer,flexbox,Polymer,Flexbox,我试图复制静态页脚，如polymer core页眉面板所示到目前为止，我有一个核心页眉面板，由页脚和带有“fit”属性的主内容区域组成，因此它可以延伸到视口的高度 <body fullbleed layout vertical> <core-header-panel flex style="background-color: red;"> <core-toolbar id="mainheader"> Header </c

我试图复制静态页脚，如polymer core页眉面板所示

到目前为止，我有一个核心页眉面板，由页脚和带有“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（如下所示）

如何解决这些问题

更新 polymer团队建议了其他实现，它们更接近解决方案：，但是它们都不能解决问题1，在代码中，页脚位于核心页眉面板之外，因此，即使页脚上方的容器大于视口，页脚也始终可见

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

将页脚移动到页眉面板主内容区域内并调整其上方的内容也不起作用

如果您愿意在页脚上设置一个固定的高度，您可以使用CSS的函数来计算内容的最小高度

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


芯头面板{
背景：红色；
}
#内容{
背景：黄色；
最小高度：计算（100%-32px/*核心工具栏*/-32px/*页脚*/）；
}
页脚{
背景：绿色；
高度：32px；
}
标题
...
页脚