title: how to keep a footer at the bottom of the page, even if the content grows?
body: <p>I'm developing a single-page and I have a shared footer layout, I want to keep it at the bottom of the page always and even I would like to know if there is a way not to visualize it in some route even though it has been declared in the app.component.html </p>
  
  <p>I have tested on scss all possible footer positions</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div class="grid-container"&gt;
  &lt;main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''"&gt;
  &lt;router-outlet #o="outlet"&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  &lt;rb-footer class="footer"&gt;&lt;/rb-footer&gt;
  &lt;/div&gt;
  &lt;rb-modal&gt;&lt;/rb-modal&gt;
  </code></pre>
  
  <p>app.component.scss</p>
  
  <pre><code>:host {
      .grid-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: auto;
        height: 100vh;
      }
  
  .footer {
    position: initia
    width:100%;
    height:40px;
  
    }
  
    }
  </code></pre>