title: Angular 2 component with sticky header & footer and dynamic content height
body: <p>I'm trying to build a component with sticky header and footer, while the content height is dynamic. I tried to use the FIDDLE example (at the bottom of this post), but the behavior is not the same. When I resize the screen, the window just run over the footer/header.</p>
  
  <p>This is what I'm trying to achieve:
  <a href="https://i.stack.imgur.com/2lqX5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2lqX5.png" alt="Illustration of what I&#39;m trying to achieve"></a></p>
  
  <p>The FIDDLE code example:
  <a href="http://jsfiddle.net/PGC7D/18/" rel="nofollow noreferrer">http://jsfiddle.net/PGC7D/18/</a></p>
  
  <pre><code>    html,body
  {
      height: 100%;
  }
  header,footer,div
  {
     width: 100%; 
  }
  .container
  {
      height: 100%;
      background: pink;
      margin: -64px 0 -30px;
      padding: 64px 0 30px;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  #content {
      overflow:auto;
      height:100%;
  }
  .block
  {
      width: 50%;
      height: 50%;
      display: inline-block;
      border: 1px solid yellow;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
  }
  header
  {
      height: 64px;
      background: purple;
      position: relative;
      z-index:1;
  }
  footer
  {
      height: 30px;
      background: gray;
      position: relative;
      z-index:1;
  }
  </code></pre>