I am having great difficulty making my footer stick to the bottom of the page in my angular application. I have tried a number of different things but cant seem to figure out what i am doing wrong. I have defined the height of the container div so i know the viewport size therefore the footer should be able to identify the bottom of the viewport and stay there. However as the content grows the footer does not grow with the content.

[![enter image description here](https://i.stack.imgur.com/C6BLu.png)](https://i.stack.imgur.com/C6BLu.png)

HTML:

```
 <body style="margin:0; padding:0; height:100%;">
  <app-root></app-root>
</body>

```

app-root html:

```
<div class="container">
  <app-header id="header"></app-header>    
  <div id="body">
    <router-outlet></router-outlet>
  </div>
  <app-footer id="footer"></app-footer>
</div>

```

CSS:

```
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%;
   position:relative;
}
#header {
   padding-bottom:10px;
}
#body {
   padding:10px;
   padding-bottom:10px;  
}
#footer {
   position: absolute;
   bottom:0;
   width:100%; 
   height:60px;   
}

```