title: Sticky footer at the bottom in Angular 2
body: <p>I'm building a project in Angular 2, and I need a sticky footer which always must be at the bottom of the page, not fixed. Example: <a href="http://codepen.io/chriscoyier/pen/uwJjr" rel="noreferrer">http://codepen.io/chriscoyier/pen/uwJjr</a></p>
  
  <p>The structure of 'app' component is like this:</p>
  
  <pre><code>&lt;header-main&gt;&lt;/header-main&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;footer&gt;...&lt;/footer&gt;
  </code></pre>
  
  <p>Probably, the problem is not connected with Angular itself, but with only CSS. However, I tried implementing it like this:</p>
  
  <pre><code>app {
     min-height: 100%;
     position: relative;
  }
  
  footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 271px;
  }
  </code></pre>
  
  <p>The result is awful:
  <a href="https://i.stack.imgur.com/FZKLQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FZKLQ.png" alt="enter image description here"></a></p>
  
  <p>The interesting thing is that if I turn off a position of footer in inspector, and turn on again, the footer becomes OK:
  <a href="https://i.stack.imgur.com/v8TLz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v8TLz.png" alt="enter image description here"></a></p>
  
  <p><strong>SOLUTION</strong>:</p>
  
  <pre><code>app {
    min-height: 100%;
    width: 100%;
    margin-bottom: -271px;
    display: table;
  }
  
  header-main,
  router-outlet,
  footer{
    display: table-row;
  }
  
  header-main {
   height: 60px;
  }
  
  router-outlet {
    position: absolute;
  }
  
  footer {
    height: 271px;
  }
  </code></pre>