htmlcsscoding-stylestylesfooter

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 {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            height: 80px;
            bottom: 0;
            position: relative;
        }
        main{
            padding-top:100px;
            text-align:center;
        }
<!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>