title: Dynamic height directive to autofill remaining area
body: <p>Is there any good implementation of a directive that dynamically change heights of element to fill remaining container's height?</p>
  
  <p>In my layout I've header (actually menu) fixed height in pixels, content area (that could overflow above window height so scroll bars should appear) and sticky footer with fixed height. Also on a left and right of content area there could be panels</p>
  
  <p>So something like that:</p>
  
  <pre><code>┌──────────────────┐
  │       Header     │ ~100px
  ├─┬──────────────┬─┤
  │P│             ▲│P│
  │a│   Content   ▒│a│ fill remaining area, with scroll bars
  │n│             ◙│n│
  │e│             ▒│e│
  │l│             ▼│l│
  ├─┴──────────────┴─┤
  │       Footer     │ ~100px
  └──────────────────┘
  </code></pre>
  
  <p>I've tried such solutions:</p>
  
  <ol>
  <li>Using height: 100%. But as header/footer are in pixels, so its hard to measure their height in percents, this solution din't solved problem.</li>
  <li>Using haks like "display: table-row" didn't allowed to have scroll bars for content area</li>
  </ol>
  
  <p>As it is quite common layout for web sites, there are quite a lot of solutions using JS, but mostly all of them were not generic - or without possibility to have scroll bars, or panels would not be possible. </p>
  
  <p>So I as understand, the only solution is to use JavaScript for adjust height of en element, so the best place where to put is directive. </p>
  
  <p>Do anybody have some implementation of directive for this task?  </p>