Problem
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sticky footer</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
      }

      body > div {
        min-height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      header,
      footer {
        background-color: rgb(75, 70, 74);
        color: #fff;
        padding: 20px;
      }

      main {
        padding: 20px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>
      <header>This is the header</header>
      <main>
        <p>
          Main page content here, add more if you want to see the footer push
          down.
        </p>
      </main>
      <footer>Sticky footer</footer>
    </div>
  </body>
</html>
Solution

By default, the html and body elements behave as block level elements. This means that they will only take up as much space as their content requires. As a result, the footer will not be pushed to the bottom of the page if the content is not long enough. To fix this, you can set the html and body elements to take up 100% of the viewport height.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sticky footer</title>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
      }

      body > div {
        min-height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      header,
      footer {
        background-color: rgb(75, 70, 74);
        color: #fff;
        padding: 20px;
      }

      main {
        padding: 20px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>
      <header>This is the header</header>
      <main>
        <p>
          Main page content here, add more if you want to see the footer push
          down.
        </p>
      </main>
      <footer>Sticky footer</footer>
    </div>
  </body>
</html>