title: How can I make a Polymer element take up all vertical space on the page?
body: <p>I'm working on a single-page Polymer app and I want to achieve a layout that takes up the entire browser window, without adding any scrollbars. I want the layout to look like this:</p>
  
  <pre><code>+---------------------------------------------+
  | Header / Toolbar                            |
  +---------------------------------------------+
  | Custom element 1             | Custom el 2  |
  |                              |              |
  | (width: 70%)                 | (width: 30%) |
  |                              |              |
  |                              |              |
  |                              |              |
  |                              |              |
  +---------------------------------------------+
  | Footer                                      |
  +---------------------------------------------+
  </code></pre>
  
  <p>The header and footer elements have a fixed height (given in pixels). The two custom elements have an initial width (given in %) and are separated by a <code>core-splitter</code> element, so the user can change the proportion they take up.</p>
  
  <p><strong>Goal</strong>: I want the two custom elements to take up ALL the remaining height in the browser window <em>without</em> creating any scrollbars.</p>
  
  <p>My approach currently looks as follows:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div vertical layout&gt;
      &lt;header-element&gt;&lt;/header-element&gt;
  
      &lt;div horizontal layout&gt;
        &lt;custom-element-1&gt;&lt;/custom-element-1&gt;
  
        &lt;core-splitter direction="right"&gt;&lt;/core-splitter&gt;
  
        &lt;custom-element-2&gt;&lt;/custom-element-2&gt;
      &lt;/div&gt;
  
      &lt;footer-element&gt;&lt;/footer-element&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have tried to put the <code>flex</code> attribute on the <code>&lt;div horizontal layout&gt;</code>, but that doesn't seem to have any effect. My only working approach so far is installing a <code>window.onresize</code> handler that takes the <code>innerHeight</code> of the browser window, subtracts the height of the header and footer, and sets the remainder explicitly on the two elements as <code>max-height</code> and <code>min-height</code>. This seems rather like a hack to me and I would assume this is a pretty common use case, and that Polymer has a built-in system to achieve this, but I cannot find it.</p>
  
  <p>How can I achieve this layout without having to manually resize the elements?</p>