This question explores CSS and addresses practical considerations related to: How can I use CSS to create a sticky footer that always stays at the bottom of the viewport?

To create a sticky footer that remains at the bottom of the viewport, you can use a combination of CSS Flexbox and viewport height units. This ensures the footer stays at the bottom even if the content is short. html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; } .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } Sticky Footer ADDITIONAL COMMENT: - The `html` and `body` elements are set to 100% height to ensure the entire viewport is utilized. - The `.container` uses Flexbox to arrange its children in a column, with `.content` taking up the available space. - The `.footer` stays at the bottom due to the `flex: 1` property on `.content`, which pushes the footer down. - This method is responsive and works well across different screen sizes. ✅

How can I use CSS to create a sticky footer that always stays at the bottom of the viewport?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

How can I use CSS to create a sticky footer that always stays at the bottom of the viewport?

Asked on Feb 18, 2026

Answer

Previous Question Next Question

To create a sticky footer that remains at the bottom of the viewport, you can use a combination of CSS Flexbox and viewport height units. This ensures the footer stays at the bottom even if the content is short.

<!-- BEGIN COPY / PASTE -->
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }
      .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      .content {
        flex: 1;
      }
      .footer {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
      }
    </style>

    <div class="container">
      <div class="content">
        <!-- Main content goes here -->
      </div>
      <div class="footer">
        <!-- Footer content goes here -->
        Sticky Footer
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The `html` and `body` elements are set to 100% height to ensure the entire viewport is utilized.
The `.container` uses Flexbox to arrange its children in a column, with `.content` taking up the available space.
The `.footer` stays at the bottom due to the `flex: 1` property on `.content`, which pushes the footer down.
This method is responsive and works well across different screen sizes.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I use CSS to create a sticky footer that always stays at the bottom of the viewport?

Asked on Feb 18, 2026

Answer

Real Questions. Clear Answers.