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

coding-style, css, footer, html, styles

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>

Problem

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> ```

Original source