title: Angular 4, how to keep footer at bottom with dynamic page content
body: <p>my app.component.html code is as follows</p>
  
  <pre><code>&lt;div class='container-fluid'&gt;
  &lt;div class='row'&gt;
      &lt;div class='col-sm-3'&gt;
          &lt;nav-menu&gt;&lt;/nav-menu&gt;
      &lt;/div&gt;
      &lt;div class='col-sm-9 body-content'&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p></p>
  
  <p>my <code>footer.component.html</code> code is:</p>
  
  <pre><code>&lt;div class="footer"&gt;
  &lt;div class="col-sm-10"&gt;
      &amp;copy; {{currentYear}} - &lt;a href=""&gt;UMD&lt;/a&gt; IP PTY LTD
  &lt;/div&gt;
  &lt;div&gt;{{environment}}&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS which I used to show the footer at the bottom of the page is </p>
  
  <pre><code>   footer {
      position: absolute;
      bottom: 0;
      left: 25%;
      width: 75%;
      height: 50px;
  }
  </code></pre>
  
  <p>Now the issue is angular loads the data dynamically on the page. Initially footer is at the bottom of the page but when data is added to the page and the controls added at runtime on the page exceeds the initial page height my footer remains at the initial page which ends up somewhere in between the page.</p>
  
  <p>How to fix this? </p>
  
  <p>In the picture below controls are added dynamically using reactive form which results in footer being show between the controls.</p>
  
  <p><a href="https://i.stack.imgur.com/fBrOM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fBrOM.png" alt="enter image description here"></a></p>