聚合物 – 芯头板和粘性页脚

我试图复制静态页脚,如聚合物核心 – 标题面板中的 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,在代码中页脚位于核心标题面板之外,因此即使在容器中也始终可见页脚上方大于视口.

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

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

解决方法

如果您愿意在页脚上设置固定高度,则可以使用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

聚合物 – 芯头板和粘性页脚

解决方法

相关文章