How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

When I use position relative with no content, footer goes up, with absolute with a lot of content, the footer goes down, and with fixed it is always there.

Is there a easy way to get at the end of the page independently of the content, shrinks and grows with content?

When there is a lot of content we can see the footer in the first page, and when there is few content we will see at the bottom.

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

main {
  flex: 1; /* Grow to fill remaining vertical space */
  text-align: center;
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  margin-top: auto; /* Push footer to the bottom */
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <header>
    header
    </header>

    <main>
    main
    </main>

    <footer>
    footer
    </footer>
</body>
</html>

Solution

With Flexbox stick the footer at the bootom is easier than ever as we can see in the following snippet.

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Set minimum height to full viewport height */
    }

    main {
      flex: 1; /* Allow main content to grow and fill available space */
    }

    footer {
      background-color: #f0f0f0;
      padding: 10px;
      text-align: center;
    }

  <body>
   <main>
    <!-- Your main content goes here -->
    <p>Your content goes here.</p>
   </main>
  
   <footer>
    <!-- Your footer content goes here -->
    <p>&copy; 2023 Your Website Footer</p>
   </footer>
  </body>