<div id="wrapper">
  <main>
    <h1>The content</h1>
    <p>
      /* fill with a looot of text */
    </p>
  </main>
  <footer>
    <p>I am a footer</p>
  </footer>
</div>

#wrapper { 
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: auto;
}

footer {
  flex-shrink: 0;
}