Question

我试图在聚合物核心标题面板中复制静态页脚，如here所示。

到目前为止，我有一个核心标题面板，其中包含一个页脚和主要内容区域，其中包含＆＃39; fit＆＃39;属性使其延伸到视口的高度。

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

但是，我有两个问题：

页脚始终可见，页眉面板仅滚动黄色＆＃39; div在主要内容区域。
当我最小化窗口时，页脚覆盖了黄色＆＃39; div主要内容区域（如下所示）

enter image description here

如何解决这些问题？

的更新

聚合物团队建议其他实现更接近解决方案：Erics solution，Robs solution，但是它们都没有解决问题1，代码中的页脚位于核心标题之外-panel，因此即使页脚上方的容器大于视口，也始终可见。

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

http://jsbin.com/vopahu/1/edit?html,output

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

http://jsbin.com/boyiwumigo/1/edit

核心标题面板和粘性页脚

的更新

1 个答案: