core-header-panel and sticky footer

Question

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)

enter image description here

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

Harry Cameron Harry Cameron · Accepted Answer · 2015-01-26T16:06:41

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

core-header-panel and sticky footer

Update

1 Answers