title: How to create a sticky footer & header with Angular Material
body: <p>I am trying to create a web page using angular-material 8. The idea is that both the header and the footer should be sticky and content should fill rest of the page. A, for me, standard application page.</p>
  
  <p>Despite googling I have not succeeded. Too many suggestions, version, etc, and no one works for me, so I am asking for help here.</p>
  
  <p>To start, this is my index.html with corresponding style.css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="/" /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      
  
      &lt;title&gt;Angular 7 User Registration and Login Example&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  
  &lt;/head&gt;
  &lt;body class="body"&gt;
      &lt;app&gt;Loading...&lt;/app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  ---------------------------
  
  
  
  .body {
    background: black;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then I have the application component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>--------------------------
  
  &lt;div  class="page"&gt;
  
  &lt;app-navigation class="header" &gt;&lt;/app-navigation&gt;
   
  
  &lt;router-outlet class="content"&gt;&lt;/router-outlet&gt;
  
   
  &lt;app-footer class="footer" &gt;&lt;/app-footer&gt;
  &lt;/div&gt;
  
  
  ---------------------------
  
  .page {
      margin: 0px;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: yellow;
    }
  
  
    .content { 
      width: 100%;
      background:salmon;
    }
  
  .footer, header{
      flex: none;
      width: 100%;
      margin: auto auto 0 auto;
      background:gray;
  }
  
  -----------------------------</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code gives the following result in a chrome browser.<a href="https://i.stack.imgur.com/cqdsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cqdsF.png" alt="enter image description here"></a></p>
  
  <p>Please notice the scrollbar. It seems that header, content, and footer are bigger than the available area in the browser. 
  How come??</p>
  
  <p>Also, notice the black area. Black is from the "body" class. How come it is visible ?? Should it not be covered by the "page" class?</p>
  
  <p>I really, really would appreciate some help here.</p>