title: core-header-panel and sticky footer
body: <p>I'm trying to replicate the static footer as shown <a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" rel="nofollow noreferrer">here</a> in a polymer core-header-panel.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;body fullbleed layout vertical&gt;
    &lt;core-header-panel flex style="background-color: red;"&gt;
      &lt;core-toolbar id="mainheader"&gt;
        Header
      &lt;/core-toolbar&gt;
      &lt;div fit layout vertical&gt;
        &lt;div flex style="background-color: yellow;"&gt; 
              ...
          &lt;/div&gt;
        &lt;footer style="background-color: green;"&gt;
          FOOTER
        &lt;/footer&gt;
      &lt;/div&gt; 
    &lt;/core-header-panel&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>However, I have two issues:</p>
  
  <ol>
  <li>The footer is always visible, the header panel only scrolls on the 'yellow' div in the main content area.</li>
  <li>When I minimize the window the footer overlays the 'yellow' div in the main content area (shown below)</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/YRHDS.png" alt="enter image description here"></p>
  
  <p>How can I resolve these issues?</p>
  
  <h2><strong>Update</strong></h2>
  
  <p>Other implementations have been suggested from the polymer team which get closer to the solution: <a href="http://jsbin.com/dofiqiliyuxo/1/edit?html,output" rel="nofollow noreferrer">Erics solution</a>, <a href="http://jsbin.com/wiweta/19/edit?html,output" rel="nofollow noreferrer">Robs solution</a>, 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.</p>
  
  <p>Moving the footer to within the header panel main content area and flexing the content above it doesn't work either.</p>
  
  <p><a href="http://jsbin.com/vopahu/1/edit?html,output" rel="nofollow noreferrer">http://jsbin.com/vopahu/1/edit?html,output</a></p>