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

发布时间：2020-12-15 02:13:18 所属栏目：百科来源：网络整理

导读：我试图复制静态页脚,如聚合物核心 – 标题面板中的 here所示. 到目前为止,我有一个核心标题面板,由一个页脚和主内容区域组成,具有’fit’属性,因此它会延伸到视口的高度. body fullbleed layout vertical core-header-panel flex style="background-color: r

我试图复制静态页脚,如聚合物核心 – 标题面板中的 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!